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

Question

一些桌面应用程序以不同的方式处理"回车"键和小键盘的"回车"键.我注意到这两个键在Javascript(jQuery)中生成相同的keyCode(13).

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

Answer 1

请参阅Jan Wolters关于Javascript Madness:键盘事件的论文.

Enter并且Numpad Enter两者都给出相同的密钥代码,即13,因为浏览器不区分这两个密钥.说实话,大多数环境也不行.可以使用Windows API(例如)区分它们,但这样做需要额外的努力.但是,这不属于浏览器抽象的范围.

UPDATE

正如比尔·索恩( Bill Thorne)理所当然地提到的那样,这个KeyboardEvent物体location现在正在运动.

来自Mozilla开发者网络:

可能的值是:

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密钥的关键事件表明Gecko和Internet Explorer上的DOM_KEY_LOCATION_STANDARD.

Answer 2

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

根据 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>

Answer 3

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

使用最新版本的Chrome(39.0.2171.95米),Firefox(32.0.3),IE(11.0.9600.17501)和Opera(12.17),键盘事件对象现在具有location属性.我认为这个属性已经存在了一段时间,虽然它有轻微的记录.

onkeydown的测试显示,当按下"正常"输入键时,keyCode = 13且location = 0; 按下小键盘输入时,keyCode = 13,位置= 3.

所以下面的代码可以用来设置key == 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....
}