22

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

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

4

4 回答 4

18

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

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

更新

正如比尔索恩正确提到的那样，该KeyboardEvent物体location现在具有财产。

来自Mozilla 开发者网络：

可能的值为：

DOM_KEY_LOCATION_STANDARD 0该键只有一个版本，或者无法区分该键的左右版本，并且不是在数字小键盘上或被认为是小键盘一部分的键上按下的。

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

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

DOM_KEY_LOCATION_NUMPAD 3 该键位于数字小键盘上，或具有与数字小键盘对应的虚拟键代码。

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

于 2011-03-24T11:41:15.130 回答
11

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

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

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....
}
于 2015-01-13T16:11:17.787 回答
5

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

每个 MDN，KeyboardEvent.keyCode已KeyBoardEvent.charCode弃用且不应再使用。

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

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

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

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

了解这些属性之间的差异有助于确定最适合您的特定情况的属性。在这个问题的情况下：将为“回车”和“小键盘输入”键event.key返回相同的输出 ( )，而将分别返回和。"Enter"event.code"Enter""NumpadEnter"

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

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

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

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>

于 2017-06-22T05:47:01.643 回答
0

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

于 2019-09-18T09:15:47.610 回答