50

相关：JavaScript KeyCode 与 CharCode

这是一些您可以在家中或在jsfiddle中尝试的代码：

el.addEventListener( 'keyup', function( e ) { 
    console.log( 'Keyup event' );
    console.log( e.keyCode );
} ); 
el.addEventListener( 'keypress', function( e ) { 
    console.log( 'Keypress event' );
    console.log( e.keyCode );
} );

为什么 keyCode 不同？

我可以理解为什么一个人应该只使用按键，但我不明白的是，在给定键盘上相同的按键的情况下，两个按键事件如何给出不同的 keyCodes。

PS：我不担心旧版浏览器的支持，我在 Chrome 中尝试过，很惊讶，但找不到解释。

4

3 回答 3

49

这些事件的目的完全不同。使用keyup和keydown来识别物理键和keypress识别键入的字符。两者是具有不同事件的根本不同任务；不要试图将两者混为一谈。特别是，keyCodeonkeypress事件通常是多余的，不应该使用（旧版 IE 除外，但请参阅下面的链接文档了解更多信息）；which对于可打印的按键，它通常与和相同charCode，尽管浏览器之间存在一些差异。

Jan Wolter 关于 key events 的文章已经链接到另一个答案，对我来说是这个主题的权威词，并且有表格描述了每种类型的关键事件和每个浏览器的每个不同属性返回的内容。

于 2012-06-14T10:00:45.990 回答
2

quirksmode.org 上有一篇很好的文章准确地回答了这个问题。您可能还想查看Unixpapa 的结果。

于 2012-06-14T09:51:26.437 回答
0

好吧，当我试图将用户的输入从表单的一个输入复制到表单的其他部分时，我偶然发现了一个差异，我已将其锁定以供用户编辑。我发现，每当用户在完成输入后使用键移动到下一个标签时，当我使用 eventListener 按键时，复制的条目中会丢失最后一个键盘条目，这在使用 keyup 时得到解决。

因此，总而言之， Keypress 会在按键被按下的瞬间监听状态，而将 keypress的结果放在一边，而 keyup 会在按键被按下后监听系统状态并包括按键的结果。

于 2018-02-02T22:58:24.697 回答