keypress 和 keyup - 为啥 keyCode 不同？

Posted 2023-02-21

【中文标题】keypress 和 keyup - 为啥 keyCode 不同？

【英文标题】：keypress and keyup - why is the keyCode different?keypress 和 keyup - 为什么 keyCode 不同？

【发布时间】：2012-06-17 08:02:01

【问题描述】：

相关：javascript KeyCode vs 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不一样？

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

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

【问题讨论】：

问题onKeyPress Vs. onKeyUp and onKeyDown有点相关，也可能是有趣的阅读。

【参考方案1】：

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

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

【讨论】：

我知道目的不同，它不能回答 keyCode 不同的事实，即使 keys 是相同的。

@FlorianMargaine：Jan Wolter 的页面上有表格显示每个属性为每个事件返回的内容。对于 WebKit（实际上是现在的大多数浏览器），keyCode 返回与 keypress 事件的 which 和 charCode 相同，这是与键入的字符相对应的字符代码，而不是键的键代码按下（就像在 keyup 和 keydown 中一样）。

我必须仔细阅读这部分的文章：On keydown and keyup events, the keycodes are not character codes, and this conversion will give wild results for many keys. There is no general portable way to convert keycodes to characters. You pretty much have to sense the browser type and base the key mapping on that. I don't have information on keycodes sent by international keyboards. :) 谢谢你的回答顺便说一句！

【参考方案2】：

good article on quirksmode.org 正好回答了这个问题。您可能还想查看Unixpapa's results。

【讨论】：

quirksmode 特别说：for instance, a lower case 'a' and an upper case 'A' have the same keyCode，这就是我不明白的原因。有什么我错过的吗？第二篇文章链接在相关问题中:)

它们是键盘上的同一个键，只是使用了不同的修饰符（shift）。 Keyup/down 用于击键，keypress 用于键入的文本。

所以他们应该给出相同的keyCode。为什么他们不依赖于事件？

不，up 和 down 应该给出相同的 keyCode，按 应该 给出 0。但是 IE、Opera 和看似 Chrome 将 charCode on-press 给出为“keyCode”。

【参考方案3】：

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

所以，综上所述，Keypress 监听按键被按下的瞬间状态，撇开按键结果，而 keyup 监听按键被按下后的系统状态，包括按键的结果。