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

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

我总是这样做:

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

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


当前回答

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

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

其他回答

Note: The answer below was written in 2010. Here many years later, both keyCode and which are 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 key is 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 code either, but Microsoft is rolling out its Blink- and V8- based replacement for Edge, which presumably does/will.


有些浏览器使用keyCode,有些使用which。

如果你使用的是jQuery,你可以可靠地使用它,因为jQuery是标准化的;更多的在这里。

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

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

或者:

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

…它处理e.which可能为0的可能性(通过使用JavaScript功能强大的||操作符,在末尾恢复0)。

jQuery规范化事件。这取决于是否事件。这事件。keyCode或事件。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;
}

.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

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.

我推荐活动。目前的关键。MDN文档:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

事件。键码和事件。它们在MDN页面的顶部都有讨厌的弃用警告: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

对于字母数字键,事件。Key在所有浏览器中的实现似乎是相同的。对于控制键(tab, enter, escape等),事件。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

事件。代码在另一个答案中提到了一种可能性,但IE10/11/Edge没有实现它,所以如果你想要IE支持,它就不存在了。

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

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

热键支持以下修饰符:` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` `。

以下特殊键可用于快捷键:退格键、tab键、清除键、enter键、return键、esc键、escape键、空格键、上、下、左、右、home键、end键、pageup键、pagedown键、del键、delete键以及f1到f19键。