Question

某些桌面应用会以不同方式处理“回车”键和小键盘的“回车”键。我注意到这两个键在Javascript（jQuery）中生成了相同的keyCode（13）。

它们是否在浏览器环境中转换为相同，或者是否可以区分它们（即，使CR在文本区域中创建一个新行，并且'enter'键提交它的形式？

Answer 1

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

Enter和Numpad Enter都提供相同的密钥代码，即13，因为浏览器不区分这两个密钥。说实话，大多数环境也不行。可以使用Windows API（例如）区分它们，但这样做需要额外的努力。但是，这不属于浏览器抽象的范围。

<强>更新

正如Bill Thorne正确mentions，KeyboardEvent对象现在拥有location属性。

可能的值是：

DOM_KEY_LOCATION_STANDARD 0密钥有   只有一个版本，或左右之间无法区分   键的版本，并没有按下数字键盘或   被认为是键盘一部分的键。

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

DOM_KEY_LOCATION_RIGHT 2   关键是密钥的右手版本;例如，右手   在标准的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米），Firefox（32.0.3），IE（11.0.9600.17501）和Opera（12.17），键盘事件对象现在具有location属性。我认为这个属性已经存在了一段时间，尽管它很少被记录下来。

onkeydown的测试显示，当＆＃34;正常＆＃34;按下回车键，keyCode = 13，位置= 0;按下小键盘输入时，keyCode = 13，位置= 3.

所以下面的代码可以用来设置键== 13如果输入，键== 176如果numpad输入：

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.key，KeyboardEvent.code和KeyboardEvent.location属性来确定

KeyboardEvent个密钥。

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

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

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

这些属性之间的

Understanding the difference可以帮助确定哪种最适合您的特定情况。对于此问题：event.key将为'回车'和'numpad enter'键返回相同的输出（"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。

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

4 个答案: