Javascript：在keydown上触发按钮

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 或网络上四处看看。我感觉有人已经完成了你想要完成的事情。

这是一个sn-p。

(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');
      }

    })
  });
})();