.keyCode vs. which

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

如果我正在监听按键事件，我应该使用.keyCode或.which来确定是否按下了回车键吗?

我总是这样做:

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

但我看到的例子使用.which而不是.keyCode。有什么不同?是否其中一种比另一种更适合跨浏览器?

120528 次浏览
小开
最佳答案

下面的答案写于2010年。多年以后，keyCode和which都被弃用了，取而代之的是which0(用于逻辑键)和which1(用于键的物理位置)。但请注意，IE不支持code，它对key的支持是基于旧版本的规范，所以不太正确。在我写这篇文章的时候，目前基于EdgeHTML和Chakra的Edge也不支持code，但微软正在推出基于which2和which3的Edge替代品，这可能会/会。

一些浏览器使用keyCode，另一些使用which。

如果你正在使用jQuery，你可以可靠地使用which作为jQuery 标准化的东西;更多的在这里。

如果你没有使用jQuery，你可以这样做:

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

或者:

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

.．.它处理了e.which可能是0的可能性(通过在最后使用JavaScript中功能强大的||操作符恢复0)。

小开

jQuery根据浏览器是否支持event.which、event.keyCode或event.charCode来规范化event.which:

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

.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 ) ));
}
小开

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

在按键事件中，按下的键的Unicode值存储在keyCode或charCode属性中，而不是两者都存储。如果按下键生成一个字符(例如:'a')， charCode被设置为该字符的代码，包括字母大小写。(即charCode会考虑是否按住shift键)。否则，按下的键的代码存储在keyCode中。 keyCode总是在keydown和keyup事件中设置。在这些情况下，charCode永远不会设置。 要获得键的代码，而不管它是存储在keyCode还是charCode中，请查询which属性。 通过IME输入的字符不会通过keyCode或charCode注册
小开

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

< a href = " http://jaywcjlove.github。io /热键" rel = " http://jaywcjlove.github.io/hotkeys/ nofollow”> < / >

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;
}
});

热键可以理解以下修饰符:⇧， shift， option， ⌥， alt， ctrl， control， command和⌘。

以下特殊键可用于快捷键:backspace， tab， clear， enter， return， esc， escape， space， up， down， tab0， tab1， tab2， tab3， tab4， tab5， tab6， tab7和tab8到tab9。

小开

如果你使用的是普通Javascript，请注意keyCode现在已弃用并将被删除:

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

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

相反，根据你想要的行为，使用:。key或.code: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key < / p >

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

小开

我目前推荐event.key。MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

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 < / p >

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

对于字母数字键，检查应该是这样的:

event.key === 'a'

对于控制字符，你需要这样做:

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

我在这里使用这个例子在多个浏览器上测试(我必须以代码依赖方式打开并编辑以使其与IE10一起工作):https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

event.code在不同的答案中被提到作为一种可能性，但IE10/11/Edge不实现它，所以如果你想要IE支持它。

小开

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

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

提交答案