JavaScript数字键盘按键代码解析

Question

我正在尝试使用以下代码解析从小键盘输入的按键事件：

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

问题在于键盘数字键0-9返回的keyCode是96-105，根据fromCharCode()的定义，它们对应小写字母a-i。我该如何使数字键盘的按键事件解析为相应的数字？

- Lee Quarella

Answer 1

你不需要使用 keydown 事件，而是需要使用 keypress 事件。只有 keypress 事件能够提供关于键入字符的可靠信息。如果你将现有代码中的 keydown 替换为 keypress，你的代码将会正常工作。

- Tim Down

---

假设我既想要从键盘获取实际字符，又想要捕获并停止回车键，以防止表单提交？停止按键似乎仍会提交。 - enigment

我无法表达我对这个答案的感激之情。在尝试捕捉所有不同的情况，包括shift、alt、numpad和移动键盘时，这是我的救星。keypress让它变得轻而易举！ - nirazul

Answer 2

keydown传递的值不是字符代码，而是键代码（这些代码从浏览器/操作系统到浏览器/操作系统有所不同）。您可以使用此页面上的表格将其映射到字符，但是要说这些东西有点...棘手...就是低估了情况。 :-)

否则，您最好等待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">

- T.J. Crowder

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...">

- nem035

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

这些示例假设“事件”是keydown事件。keyIdentifier是一个十六进制数字，表示相关字符的Unicode值。使用keyIdentifier，数字键盘/键盘和QWERTY键盘上方的数字将具有相同的值，48-57（U+0030-U+0039），即使是在keyDown事件中也是如此。

浏览器中的Unicode值看起来像U+0030或U+002F。解析此字符串以仅获取十六进制值，然后使用基数为16的parseInt()将其转换为十进制。

- ChrisN

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);

- Sacky San