Javascript: 按键时触发按钮

Question

我正在构建一个音乐电子学习的东西，并希望使用键盘触发一个输入按钮，这将播放指定的音符。就像一架钢琴！除了这个会让你的耳朵流血，但这不是重点。

onclick() 本身在手动按下按钮时有效，但事实证明绑定到键盘很困难。

HTML:

<input type="button" id="pgC" value="C" onClick="pgC()">
<input type="button" id="pgCsharp" value="C#" onClick="pgCsharp()">

绑定到键盘的脚本：

$(function() {
$(document).keydown(function(e) {
    switch (e.keyCode) {
    case 65:
        $('#pgC')[0].onclick();
        break;
    case 87:
        $('#pgCsharp')[0].onclick();
        break;
    }
 });
});

我试图从中修改：Binding Keyboard to Onclick Event

我的理解是$('#pgC')[0].onclick();应该找到分配的id，并根据按下的键触发onclick，在这种情况下是小写"a"。

非常感谢任何帮助！ :D

Answer 1

这是处理简单情况的答案，但您需要考虑其他因素，例如如果用户想弹奏和弦等怎么办

您可以在此处查看简单的演示并对其进行编辑以满足您的需要，http://plnkr.co/edit/ZfcHdM?p=preview。

但是，在沿着您当前开始的道路前进之前，请在 GitHub 或网上四处看看。我有一种感觉，有人已经完成了您想要完成的事情。

这是一个片段。

(function() {
  var KeyboardSimulator = (function () {
    function KeyboardSimulator() {
    }

    KeyboardSimulator.prototype.keyPressed = function (key) {
        // Add some logic to check if the particular key is registered.
        console.log('The musician pressed the "' + key + '" key.');
    };

    return KeyboardSimulator;
  })();

  $(document).ready(function() {
    var simulator = Object.create(KeyboardSimulator.prototype);
    var intrumentSimulatorContext = $('#instrumentSimulator');

    intrumentSimulatorContext.on('click', '.key', function(e) {
      var key = $(this).val();

      e.preventDefault();
      simulator.keyPressed(key);
    });

    $(document.body).on('keydown', function(e) {
      var key = String.fromCharCode(e.keyCode).toUpperCase(),
        keyMap = {
          // keyboard key -> musical note
          'A': 'C',
          'W': 'CSharp',
          'S': 'D'
        }

      if (key in keyMap) {
        $('#pg' + keyMap[key]).trigger('click');
      }

    })
  });
})();

Javascript: 按键时触发按钮

Javascript: triggering button on keydown

javascript

jquery

keydown