Question

I have the following HTML/CSS to create a simple keyboard.我尝试过使用jQuery keyPress（），但是当你按下键盘上的键时，我似乎无法理解它，相应的字母有“触发器”类。

例如，当您在带有“输入”的textarea中按Q时，带有“q”的跨度应将其背景更改为绿色（更改为“触发”类）

任何帮助都会非常感谢，提前谢谢。

修改

到目前为止，我有一些Javascript，每次按键都会发出警报。见example

Answer 1

在keypress事件中，event.which属性映射到字符代码。 String.fromCharCode方法可用于将数字字符代码转换为字符。

在该示例中，使用正则表达式来检查单个字符是否是有效代码。如果是，则添加一个类。

演示：http://jsfiddle.net/AHPaY/4/

$(function () {
  $("#input").keypress(function (event) {
      $('.trigger').removeClass('trigger');
      var char = String.fromCharCode(event.which).toLowerCase();
      if (/[qwerty]/.test(char)) {
          $('#'+char).addClass('trigger')
      }
  });
});

Answer 2

如果您希望仅在关键功能关闭时更改背景，则需要在keydown上进行设置并将其重新设置为keyup：

$(function () {
  $("#input").keydown(function (event) {
      $("#" + String.fromCharCode(event.which)).addClass("trigger");
  }).keyup(function (event) {
      $("#" + String.fromCharCode(event.which)).removeClass("trigger");
  });
});

请注意keydown和keyup返回的是键码而非字符码，但就字母键而言，将它们视为大写字母的字符代码是安全的。（因此，在下面的演示中，我将跨度的id更改为大写，以便在事件处理程序中保存算术。）

演示：http://jsfiddle.net/AHPaY/6/

P.S。如果你试验这个演示，你会发现它同时适用于同时按键，例如，同时按住Q和T ......

Answer 3

试试这个

$(function () {
    $("#input").keypress(function (event) {
        var keycode=event.which || event.keycode;
        var key=String.fromCharCode(keycode).toLowerCase();
        $('span.trigger').removeClass('trigger').addClass('key'); // reset  
        $("#"+key).removeClass('key').addClass('trigger'); 
    });
});

A fiddle is here

Another fiddle is here

如果您希望将所有范围保留为绿色，请禁用通过重置注释的行。

jQuery键盘功能keyPress

3 个答案:

演示：http://jsfiddle.net/AHPaY/4/