Javascript 数字键盘按键代码解析

Question

我正在尝试使用以下内容解析数字键盘中的 keydown 事件：

$('#myDiv').keydown(function(e) {
  val = String.fromCharCode(e.which)
});

问题是键盘 0-9 返回 96-105 的 keyCodes，根据 fromCharCode () 是小写字母 ai。如何获取数字键盘的按键事件以解析为适当的数字？

Answer 1

您不需要：您使用 keypress 事件。 keypress 事件是唯一可以为您提供有关键入字符的可靠信息的事件。如果您只需将 keydown 更改为 keypress，您现有的代码就可以工作。

Answer 2

传递给 keydown 的 which 值不是字符代码；它是一个关键代码（代码因浏览器/操作系统而异）。您可以使用此页面上的表格将其映射到字符，但要说的是，这个东西是有点……尴尬……轻描淡写了。 :-)

否则，最好的办法是等待 keypress 事件，该事件将包含字符代码（如果相关）而不是按键代码。

示例：实时副本 | 实时源

jQuery(function($) {

  $("#theField")
    .keydown(function(event) {
      showKey("keydown", event.which);
    })
    .keypress(function(event) {
      showKey("keypress", event.which);
    })
    .focus();

  function showKey(eventName, which) {
    display(eventName +
            ": " + which + " (" +
            String.fromCharCode(which) + ")");
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

使用此 HTML：

<input type="text" id="theField">

Answer 3

这里的答案现在已经过时了，因为 KeyboardEvent.which 、 KeyboardEvent.keyCode 和 KeyboardEvent.charCode 均已弃用。

最新版本的 Firefox、Chrome、IE/Edge 和 Safari 获取字符密钥的正确方法是使用 KeyboardEvent.key 并且它应该适用于任何按键事件，而不仅仅是 keypress。

KeyboardEvent.key 浏览器兼容性

document.
  querySelector('input').
  addEventListener('keydown', event => console.log(event.key));

<input placeholder="Start typing...">

---

如果您仍然需要获取字符代码，您应该使用 KeyboardEvent.code 属性。

KeyboardEvent.code 浏览器兼容性

document.
  querySelector('input').
  addEventListener('keydown', event => console.log(event.code));

<input placeholder="Start typing...">

Answer 4

如果由于需要取消事件而无法使用 keypress，则有一种方法可以使用 keydown 来执行此操作。在此测试中使用 if() 语句：

parseInt(event.keyIdentifier.substring(2),16) > 47 && parseInt(event.keyIdentifier.substring(2),16) < 58

或者，使用 jQuery 事件：

parseInt(event.originalEvent.keyIdentifier.substring(2),16) > 47 && parseInt(event.originalEvent.keyIdentifier.substring(2),16) < 58

这些示例假设“event”是 keydown 事件。 keyIdentifier 是一个十六进制数字，表示相关字符的 unicode 值。使用 keyIdentifier，数字键盘/小键盘上的数字以及 QWERTY 键盘上方的数字都将具有相同的值，48 - 57 (U+0030 - U+0039)，即使有 keyDown 事件也是如此。

浏览器中的 Unicode 值将类似于 U+0030 或 U+002F。解析该字符串仅获取十六进制值，然后使用基数为 16 的 parseInt() 将其转换为基数 10。

Answer 5

您可以使用 keydown 并检测数字键盘键。我使用以下代码完成了它。在解释按键之前从数字键盘按键中减去 48

function navigate(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode >= 96 && keyCode <= 105) {
            // Numpad keys
            keyCode -= 48;
        }  
        var txtVal = String.fromCharCode(keyCode);