jQuery 键盘功能 keyPress答案

【问题标题】：jQuery Keyboard Function keyPressjQuery 键盘功能 keyPress
【发布时间】：2012-04-03 05:42:28
【问题描述】：

I have the following HTML/CSS to create a simple keyboard. 我已经尝试过使用 jQuery keyPress()，但我似乎无法得到它，所以当你按下键盘上的一个键时，相应的字母具有类“触发器”。

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

任何帮助将不胜感激，在此先感谢。

编辑

到目前为止，我有一些 Javascript，可以在每次击键时发出警报。看到这个example

【问题讨论】：

您的小提琴没有任何 JavaScript 代码。您能否提供您的真实尝试，并告诉我们您遇到的问题？

标签： javascript jquery html css keyboard

【解决方案1】：

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

【讨论】：

【解决方案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 返回的键码不是字符码，但就字母键而言，将它们视为大写字母的字符码是安全的。（所以在下面的演示中，我将 span 的 id 更改为大写，以节省在事件处理程序中进行算术运算。）

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

附：如果您尝试演示，您会发现这也适用于同时按键，例如，同时按住 Q 和 T...

【讨论】：

警告：此方法中缺少检查会为大多数非字母数字字符生成大量脚本错误。
是的，@RobW 所说的或多或少是正确的 - 它不会对 most 非字母字符产生错误，因为大多数仍会生成潜在有效的元素 ID这将根本不匹配任何元素 - jQuery 很好，没有错误 - 但有些键会给出错误，包括 shift、ctrl、tab 等。
按Enter 已经会导致错误。一个简单的检查，例如。使用如下所示的 RegEx 将解决此问题。另一个注意事项：OPs 代码目前运行良好。但是，当还应实现数字时，必须选择前缀，因为 ID 可能不以数字开头。更安全的方案是使用前缀+字符码作为ID，这样无效字符也可以使用。
@RobW - 据我了解，html5 id 可以以数字开头。但无论如何，我可能会选择你的前缀计划。最大的问题不是防止 JS 错误，因为正如您所说的一个简单的测试可以解决这个问题，最大的问题是处理 keyup 和 keydown 返回键代码而不是字符代码和非字母键的键代码的事实'在所有浏览器和操作系统中保持一致。

【解决方案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.

如果您想将所有跨度保留为绿色，则禁用带有 reset 注释的行。

【讨论】：