当前位置：文江博客话题详情

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

发布于 2024-10-26 07:16:11 字数 156 浏览 3 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初心未许 2024-11-02 07:16:11

请参阅 Jan Wolters 的论文 Javascript 疯狂：键盘事件。

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

更新

正如 Bill Thorne 正确提到，KeyboardEvent 对象运动现在的location属性。

来自 Mozilla 开发者网络：

可能的值为：
DOM_KEY_LOCATION_STANDARD 0 该密钥具有
只有一个版本，或者无法区分左右
该键的版本，并且没有在数字键盘或
被视为键盘一部分的键。
DOM_KEY_LOCATION_LEFT 1 该键是该键的左侧版本；
例如，在标准 101 上按下左侧 Control 键
键美式键盘。该值仅用于具有更多的键
键盘上的一个可能位置。
DOM_KEY_LOCATION_RIGHT 2
key 是右手版本的 key；例如，右手
在标准 101 键美式键盘上按下 Control 键。这个值
仅用于在键上具有多个可能位置的键
键盘。
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。

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

Enter and Numpad Enter both 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.

UPDATE

As Bill Thorne rightfully mentions, the KeyboardEvent object sports a location property nowadays.

From the Mozilla Developer Network:

Possible values are:
DOM_KEY_LOCATION_STANDARD 0 The 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_LEFT 1 The 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_RIGHT 2 The
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_NUMPAD 3 The 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.

回复收藏 0 原文

最近可好 2024-11-02 07:16:11

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

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

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

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

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

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

了解这些属性之间的差异有助于确定哪些属性将最适合您的具体情况。对于此问题： event.key 将为“回车”键和“数字键盘输入”键返回相同的输出（“Enter”），而 < code>event.code 将分别返回 "Enter" 和 "NumpadEnter"。

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

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

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

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

  let str = "key = '" + event.key + 
              "'   code = '" + event.code + "'" + 
              "'   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>

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

Per MDN, KeyboardEvent.keyCode and KeyBoardEvent.charCode are deprecated and should no longer be used.

KeyboardEvent keys can be determined by accessing the KeyboardEvent.key, KeyboardEvent.code, and KeyboardEvent.location properties as necessary.

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

KeyboardEvent.code returns a string description of the key.

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

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

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.key would be a better choice.

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

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

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

  let str = "key = '" + event.key + 
              "'   code = '" + event.code + "'" + 
              "'   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>

回复收藏 0 原文

一袭水袖舞倾城 2024-11-02 07:16:11

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

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

onkeydown的测试表明，当按下“正常”回车键时，keyCode=13且location=0；当按下数字键盘 Enter 时，keyCode=13 且 location=3。

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

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.

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.

So the following code can be used to set key==13 if the 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....
}

回复收藏 0 原文

紧拥背影 2024-11-02 07:16:11

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