Javascript：按下键盘时触发按钮

Question

I'm building a musical e-learning thing, and wish to trigger an input button using the keyboard, which will play an assigned note. Just like a piano! Except this one will make your ears bleed, but that's beside the point.

The onclick() itself works when pressing the button manually, but binding to the keyboard is proving difficult.

HTML:

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

Script to bind to keyboard:

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

Which I attempted to modify from this: Binding Keyboard to Onclick Event

My understanding is that $('#pgC')[0].onclick(); should find the assigned id, and trigger the onclick based on which key is pressed, in this case a lower case "a".

Any and all help is greatly appreciated! :D

Answer 1

Here is an answer that handles the simple case, but you need to take into account other stuff, eg what if a user wants to play a chord etc.

You can see the simple demo here and edit it to fit your needs, http://plnkr.co/edit/ZfcHdM?p=preview .

However, before going down the road your currently starting on, just look around on GitHub or the Net. I have a feeling someone has already done what you're trying to accomplish.

Here's a snippet.

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

    })
  });
})();