jQuery键盘功能键按下

jQuery Keyboard Function keyPress

本文关键字：功能键 键盘 jQuery      更新时间：2023-09-26

我有以下HTML/CSS来创建一个简单的键盘。我尝试过使用jQuery keyPress（），但我似乎无法获得它，所以当你在键盘上按键时，对应的字母具有类"trigger"。

例如，当您在id为"input"的文本区域中按Q时，id为"Q"的跨度应将其背景更改为绿色（更改为类"trigger"）

如有任何帮助，我们将不胜感激，提前表示感谢。

编辑

到目前为止，我有一些Javascript，它会在每次击键时发出警报。请参阅此示例

如果只想在按键按下时更改背景，则需要将其设置为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/

附言：如果你用这个演示进行实验，你会发现它也适用于同时按下按键，例如，同时按下Q和T。。。

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

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

演示：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')
      }
  });
});

试试这个

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

小提琴在这儿。

另一把小提琴在这里。

如果要将所有跨度保持为绿色，请禁用带重置注释的行

相关文章：