Javascript .keyCode 与 .which

.keyCode vs. .which

提问by ScottE

I thought this would be answered somewhere on Stack Overflow, but I can't find it.

我以为这会在 Stack Overflow 的某个地方得到解答，但我找不到。

If I'm listening for a keypress event, should I be using .keyCodeor .whichto determine if the Enter key was pressed?

如果我正在监听按键事件，我应该使用.keyCode还是.which确定是否按下了 Enter 键？

I've always done something like the following:

我一直在做类似以下的事情：

$("#someid").keypress(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // do something
  }
});

But I'm seeing examples that use .whichinstead of .keyCode. What's the difference? Is one more cross-browser friendly than the other?

但我看到使用.which而不是.keyCode. 有什么不同？一个比另一个更跨浏览器友好吗？

采纳答案by T.J. Crowder

Note:The answer below was written in 2010. Here many years later, both keyCodeand whichare deprecated in favor of key(for the logical key) and code(for the physical placement of the key). But note that IE doesn't support code, and its support for keyis based on an older version of the spec so isn't quite correct. As I write this, the current Edge based on EdgeHTML and Chakra doesn't support codeeither, but Microsoft is rolling out its Blink- and V8- based replacement for Edge, which presumably does/will.

注意：下面的答案写于 2010 年。多年后，这里keyCode和which都被弃用，以支持key（对于逻辑键）和code（对于键的物理位置）。但请注意，IE 不支持code，并且其支持key基于旧版本的规范，因此不太正确。在我写这篇文章时，当前基于 EdgeHTML 和 Chakra 的 Edge 都不支持code，但微软正在推出基于Blink和V8的 Edge 替代品，这可能会/将会。

---

---

Some browsers use keyCode, others use which.

一些浏览器使用keyCode，其他浏览器使用which.

If you're using jQuery, you can reliably use whichas jQuery standardizes things; More here.

如果你使用 jQuery，你可以可靠地使用whichjQuery标准化的东西；更多在这里。

If you're not using jQuery, you can do this:

如果你不使用 jQuery，你可以这样做：

var key = 'which' in e ? e.which : e.keyCode;

Or alternatively:

或者：

var key = e.which || e.keyCode || 0;

...which handles the possibility that e.whichmight be 0(by restoring that 0at the end, using JavaScript's curiously-powerful ||operator).

......它处理的可能性，e.which可能是0（通过恢复0到了最后，使用JavaScript的好奇，强大的||运营商）。

回答by David Tang

jQuery normalises event.whichdepending on whether event.which, event.keyCodeor event.charCodeis supported by the browser:

jQuery的正常化event.which取决于是否event.which，event.keyCode或者event.charCode是由浏览器的支持：

// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
   event.which = event.charCode != null ? event.charCode : event.keyCode;
}

An added benefit of .whichis that jQuery does it for mouse clicks too:

一个额外的好处.which是 jQuery 也可以用于鼠标点击：

// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
    event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}

回答by slykat

If you are staying in vanilla Javascript, please note keyCode is now deprecated and will be dropped:

如果您使用的是原生 Javascript，请注意 keyCode 现在已弃用并将被删除：

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any tim

此功能已从 Web 标准中删除。虽然一些浏览器可能仍然支持它，但它正在被删除。尽可能避免使用它并更新现有代码；请参阅本页底部的兼容性表以指导您的决定。请注意，此功能可能随时停止工作

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Instead use either: .keyor .codedepending on what behavior you want: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/codehttps://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

而是使用：.key或.code，具体取决于您想要的行为：https: //developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US/docs/Web/API/KeyboardEvent/key

Both are implemented on modern browsers.

两者都在现代浏览器上实现。

回答by Akrikos

I'd recommend event.keycurrently. MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

我建议event.key目前。MDN 文档：https: //developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCodeand event.whichboth have nasty deprecated warnings at the top of their MDN pages:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCodehttps://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

event.KeyCode并且event.which它们的 MDN 页面顶部都有令人讨厌的弃用警告：
https: //developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US /docs/Web/API/KeyboardEvent/which

For alphanumeric keys, event.keyappears to be implemented identically across all browsers. For control keys (tab, enter, escape, etc), event.keyhas the same value across Chrome/FF/Safari/Opera but a different value in IE10/11/Edge (IEs apparently use an older version of the spec but match each other as of Jan 14 2018).

对于字母数字键，event.key似乎在所有浏览器中实现相同。对于控制键（tab、enter、escape 等），event.key在 Chrome/FF/Safari/Opera 中具有相同的值，但在 IE10/11/Edge 中具有不同的值（IE 显然使用旧版本的规范，但彼此匹配2018 年 1 月 14 日）。

For alphanumeric keys a check would look something like:

对于字母数字键，检查看起来像：

event.key === 'a'

For control characters you'd need to do something like:

对于控制字符，您需要执行以下操作：

event.key === 'Esc' || event.key === 'Escape'

I used the example here to test on multiple browsers (I had to open in codepen and edit to get it to work with IE10): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

我使用这里的示例在多个浏览器上进行测试（我必须在 codepen 中打开并进行编辑才能使其与 IE10 一起使用）：https: //developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/代码

event.codeis mentioned in a different answer as a possibility, but IE10/11/Edge don't implement it, so it's out if you want IE support.

event.code在一个不同的答案中提到了一种可能性，但 IE10/11/Edge 没有实现它，所以如果你想要 IE 支持，它就出来了。

回答by Leo

look at this: https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

看看这个：https: //developer.mozilla.org/en-US/docs/Web/API/event.keyCode

In a keypress event, the Unicode value of the key pressed is stored in either the keyCode or charCode property, never both. If the key pressed generates a character (e.g. 'a'), charCode is set to the code of that character, respecting the letter case. (i.e. charCode takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in keyCode. keyCode is always set in the keydown and keyup events. In these cases, charCode is never set. To get the code of the key regardless of whether it was stored in keyCode or charCode, query the which property. Characters entered through an IME do not register through keyCode or charCode.

在 keypress 事件中，按下的键的 Unicode 值存储在 keyCode 或 charCode 属性中，不能同时存储两者。如果按下的键生成一个字符（例如“a”），则 charCode 被设置为该字符的代码，尊重字母大小写。（即 charCode 考虑是否按住 shift 键）。否则，按下键的代码存储在 keyCode 中。keyCode 总是在 keydown 和 keyup 事件中设置。在这些情况下，永远不会设置 charCode。要获取密钥的代码，无论它是存储在 keyCode 还是 charCode 中，请查询 which 属性。通过 IME 输入的字符不会通过 keyCode 或 charCode 注册。

回答by u1334703

A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies.

一个强大的 Javascript 库，用于捕获键盘输入和输入的组合键。它没有依赖关系。

http://jaywcjlove.github.io/hotkeys/

http://jaywcjlove.github.io/hotkeys/

hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('you pressed ctrl+a!');break;
        case "ctrl+b":alert('you pressed ctrl+b!');break;
        case "r":alert('you pressed r!');break;
        case "f":alert('you pressed f!');break;
    }
});

hotkeys understands the following modifiers: ?, shift, option, ?, alt, ctrl, control, command, and ?.

hotkeys 理解以下修饰符：?, shift, option, ?, alt, ctrl, control, command, 和?。

The following special keys can be used for shortcuts: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deleteand f1through f19.

以下特殊键可用于快捷键：backspace，tab，clear，enter，return，esc，escape，space，up，down，left，right，home，end，pageup，pagedown，del，delete和f1通过f19。

回答by Pankaj Chauhan

In Firefox, the keyCode property does not work on the onkeypress event (will only return 0). For a cross-browser solution, use the which property together with keyCode, e.g:

在 Firefox 中，keyCode 属性对 onkeypress 事件不起作用（只会返回 0）。对于跨浏览器解决方案，将 which 属性与 keyCode 一起使用，例如：

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support