如何区分 Javascript 中的“Enter”和“Return”键？

Question

某些桌面应用程序以不同的方式处理“回车”键和数字键盘的“输入”键。我注意到这两个键在 Javascript (jQuery) 中生成相同的 keyCode (13)。

它们在浏览器环境中是否被转换为相等，或者是否可以区分它们（即，让 CR 在文本区域中换行，然后“输入”键提交表单？

Answer 1

请参阅 Jan Wolters 关于 Javascript Madness: Keyboard Events 的论文。

Enter 和 Numpad Enter 都给出相同的键码，即 13，因为浏览器不区分这两个键。老实说，大多数环境也不行。可以使用 Windows API（例如）来区分它们，但这样做确实需要额外的努力。但是，这超出了浏览器的抽象范围。

更新

正如 Bill Thorne 正确地 mentions 一样，KeyboardEvent 对象现在具有 location 属性。

来自Mozilla Developer Network：

可能的值是：

DOM_KEY_LOCATION_STANDARD0密钥有 只有一个版本，或者无法区分左右 键的版本，并且未在数字小键盘或 被视为键盘一部分的键。

DOM_KEY_LOCATION_LEFT 1 钥匙是钥匙的左手版本； 例如，在标准 101 上按下左侧的 Control 键 键美式键盘。此值仅用于具有更多的键 键盘上的一个可能位置。

DOM_KEY_LOCATION_RIGHT2 key 是钥匙的右手版本；例如，右手 在标准的 101 键美式键盘上按下控制键。这个值 仅用于具有多个可能位置的键 键盘。

DOM_KEY_LOCATION_NUMPAD 3 键在数字上 键盘，或具有对应于数字的虚拟键码 键盘。

注意：当 NumLock 被锁定时，Gecko 总是返回 DOM_KEY_LOCATION_NUMPAD 用于数字键盘上的键。否则， 当 NumLock 被解锁并且键盘实际上有一个数字时 键盘，Gecko 也总是返回 DOM_KEY_LOCATION_NUMPAD。在另一 手，如果键盘没有小键盘，例如在笔记本电脑上 计算机，某些键只有在 NumLock 被锁定时才会变为 Numpad。什么时候 此类键触发键事件，位置属性值取决于 钥匙。也就是说，它不能是 DOM_KEY_LOCATION_NUMPAD。笔记： NumLock 键的键事件指示 DOM_KEY_LOCATION_STANDARD 都在 Gecko 和 Internet Explorer。

Answer 2

如果键盘上的某个键在物理上有所不同，则浏览器应用程序应该与桌面应用程序一样具有区分能力。

在 Chrome (39.0.2171.95 m)、Firefox (32.0.3)、IE (11.0.9600.17501) 和 Opera (12.17) 的最新版本中，键盘事件对象现在具有 location 属性。我想这个属性已经存在了一段时间，尽管它的文档很少。

onkeydown 测试显示，当按下“正常”回车键时，keyCode=13 和 location=0；当按下小键盘回车时，keyCode=13 和 location=3。

所以下面的代码可以用来设置key==13 if enter, key==176 if numpad enter:

window.onkeydown=function(ev)
{
    var e= ev || window.event,
      key = e.keyCode || e.which;

    if ((key==13) &&
        (e.location===3))
      key=176; // 176 is the scancode for the numpad enter
    // continued....
}

Answer 3

我正在提供更新，因为这个问题仍然出现在谷歌搜索结果的顶部附近。

根据 MDN，KeyboardEvent.keyCode 和 KeyBoardEvent.charCode 已弃用，不应再使用。

KeyboardEvent 键可以根据需要通过访问KeyboardEvent.key、KeyboardEvent.code 和KeyboardEvent.location 属性来确定。

KeyboardEvent.key 通常返回您在文本编辑器中看到的输出键和非输出键上的名称（包括区分大小写）。

KeyboardEvent.code 返回键的字符串描述。

KeyboardEvent.location 返回一个介于 0 和 3 之间的整数，表示按键所在的键盘区域（分别为标准、左、右和小键盘）。

Understanding the difference 在这些属性之间可以帮助确定哪个最适合您的给定情况。对于这个问题：event.key 将返回相同的输出 ("Enter") 对于“回车”和“小键盘输入”键，而 event.code 将分别返回 "Enter" 和 "NumpadEnter"。

在这种情况下，如果您想区分小键盘和键盘按键，可以使用event.code。如果您希望它们的操作相同，event.key 将是更好的选择。

如果您想区分其他键，例如左右 Ctrl 键，您还需要查看 event.location 属性。

我正在添加一个小型键盘事件游乐场，以查看这些事件属性之间的区别。感谢MDN 提供了the concept，我在下面只稍作修改：

window.addEventListener("keydown", function(event) {

  let str = "key = '" + event.key + 
              "' &nbsp code = '" + event.code + "'" + 
              "' &nbsp location = '" + event.location + "'" ;
              
  let el = document.createElement("span");
  
  el.innerHTML = str + "<br/>";
 
  document.getElementById("output").appendChild(el);
  
}, true);

#output {
  font-family: Arial, Helvetica, sans-serif;
  overflow-y: auto;
  margin-left: 4em
}

#output span {
  line-height: 2em;
}

#output :nth-child(2n) {
  color: blue;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code -->

<p>
  Press keys on the keyboard to see what the KeyboardEvent's key and code values are for  each one.
</p>
<div id="output"></div>

Answer 4

您可以通过事件的code 属性来区分两者。对于小键盘，它返回NumpadEnter，而对于另一个小键盘，它返回Enter。或者，您也可以使用location 属性，它适用于所有情况，这与code 属性不同。对于小键盘 Enter，它返回 3，而对于其他 Enter，它返回 0。