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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5418313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 17:08:11  来源:igfitidea点击:

How to differentiate between 'Enter' and 'Return' keys in Javascript?

javascriptkeycode

提问by mikkelbreum

Some desktop apps treat the 'carriage return' key and the numpad's 'enter' key differently. I've noticed that these two keys generate the same keyCode (13) in Javascript (jQuery).

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

Are they converted to be equal in the browser environment, or is it possible to differentiate between them (ie. make the CR make a new line in a text area, and the 'enter' key submit it's form ?

它们是否在浏览器环境中转换为相等,或者是否可以区分它们(即让 CR 在文本区域中创建一个新行,并且“输入”键提交它的表单?

采纳答案by Martijn

See Jan Wolters' treatise on Javascript Madness: Keyboard Events.

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

Enterand Numpad Enterboth give the same keycode, i.e. 13, because browsers do not differentiate between the two keys. To be honest, nor do most environments. It is possible to differentiate between them using the Windows API (for example), but it does take extra effort to do so. This, however, falls outside the scope of the browser's abstraction.

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

UPDATE

更新

As Bill Thorne rightfully mentions, the KeyboardEventobject sports a locationproperty nowadays.

正如比尔索恩正确地提到的那样,该KeyboardEvent对象location如今具有属性。

From the Mozilla Developer Network:

来自Mozilla 开发者网络

Possible values are:

DOM_KEY_LOCATION_STANDARD0The key has only one version, or can't be distinguished between the left and right versions of the key, and was not pressed on the numeric keypad or a key that is considered to be part of the keypad.

DOM_KEY_LOCATION_LEFT1The key was the left-hand version of the key; for example, the left-hand Control key was pressed on a standard 101 key US keyboard. This value is only used for keys that have more that one possible location on the keyboard.

DOM_KEY_LOCATION_RIGHT2The key was the right-hand version of the key; for example, the right-hand Control key is pressed on a standard 101 key US keyboard. This value is only used for keys that have more that one possible location on the keyboard.

DOM_KEY_LOCATION_NUMPAD3The key was on the numeric keypad, or has a virtual key code that corresponds to the numeric keypad.

Note: When NumLock is locked, Gecko always returns DOM_KEY_LOCATION_NUMPAD for the keys on the numeric pad. Otherwise, when NumLock is unlocked and the keyboard actually has a numeric keypad, Gecko always returns DOM_KEY_LOCATION_NUMPAD too. On the other hand, if the keyboard doesn't have a keypad, such as on a notebook computer, some keys become Numpad only when NumLock is locked. When such keys fires key events, the location attribute value depends on the key. That is, it must not be DOM_KEY_LOCATION_NUMPAD. Note: NumLock key's key events indicate DOM_KEY_LOCATION_STANDARD both on Gecko and Internet Explorer.

可能的值为:

DOM_KEY_LOCATION_STANDARD0该键只有一个版本,或者无法区分该键的左右版本,并且没有按下数字小键盘或被认为是小键盘一部分的键。

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

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

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

注意:当 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。

回答by Bill Thorne

If there is a key on the keyboard that is physically different, browser applications should be just as capable as desktop applications to differentiate.

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

With the latest versions of Chrome (39.0.2171.95 m), Firefox (32.0.3), IE (11.0.9600.17501) and Opera (12.17), the keyboard event object now has the location property. I would presume this property has been around for a while, although it is lightly documented.

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

Tests of onkeydown reveal that when the "normal" enter key is pressed, keyCode=13 and location=0; when the numpad enter is pressed, keyCode=13 and location=3.

onkeydown 的测试表明,当按下“正常”回车键时,keyCode=13 和 location=0;当按下小键盘输入时,keyCode=13 和 location=3。

So the following code can be used to set key==13 if the enter, key==176 if numpad enter:

所以下面的代码可以用来设置key==13如果回车,key==176如果小键盘输入:

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

回答by Isaac B

I am providing an update as this question still appears near the top of google search results.

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

Per MDN, KeyboardEvent.keyCodeand KeyBoardEvent.charCodeare deprecated and should no longer be used.

每MDN,KeyboardEvent.keyCodeKeyBoardEvent.charCode已过时,不应再使用。

KeyboardEventkeys can be determined by accessing the KeyboardEvent.key, KeyboardEvent.code, and KeyboardEvent.locationproperties as necessary.

KeyboardEvent键可以通过访问来确定KeyboardEvent.keyKeyboardEvent.codeKeyboardEvent.location性能是必要的。

KeyboardEvent.keyreturns generally what you see in a text editor for output keys and the name on non-output keys (including being case-sensitive).

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

KeyboardEvent.codereturns a string description of the key.

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

KeyboardEvent.locationreturns an integer between 0 and 3 to signify the area of the keyboard the key is located in (standard, left, right, and numpad respectively).

KeyboardEvent.location返回一个 0 到 3 之间的整数来表示键所在的键盘区域(分别为标准、左、右和小键盘)。

Understanding the differencebetween these properties can help to determine which will be most appropriate for your given situation. In the case of this question: event.keywill return the same output ("Enter") for both the 'carriage return' and 'numpad enter'keys, while event.codewill return "Enter"and "NumpadEnter"respectively.

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

In this case, if you wanted to differentiate between numpad and keyboard keys, you could use event.code. If you wanted their operation to be the same, event.keywould be a better choice.

在这种情况下,如果您想区分小键盘和键盘键,您可以使用event.code. 如果你希望他们的操作是一样的,event.key会是一个更好的选择。

If you wanted to differentiate between other keys, such as the left and right Ctrlkeys, you would also want to look at the event.locationproperty.

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

I'm adding a small keyboard event playground to see the difference between these event properties. Credit to MDNfor providing the conceptthat I only slightly modified below:

我正在添加一个小的键盘事件操场来查看这些事件属性之间的区别。感谢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>

回答by Ankur Kedia

You can differentiate both by codeproperty of the event. For the numpad one, it returns NumpadEnterand for the other one it returns Enter. Alternatively, you can also use locationproperty which works in all cases, unlike codeproperty. For numpad Enter, it returns 3 whereas, for other Enter it returns 0.

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