Javascript keypress 和 keyup - 为什么 keyCode 不同?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11030532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
keypress and keyup - why is the keyCode different?
提问by Florian Margaine
Related: JavaScript KeyCode vs CharCode
相关:JavaScript KeyCode 与 CharCode
Here is some code you can try at home or in a jsfiddle:
以下是一些您可以在家或在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 );
} );
Why is the keyCode different?
为什么keyCode不同?
I can understand why one should use keypress only, but what I don't understand is how two key events, given the same hit key on the keyboard, give different keyCodes.
我可以理解为什么应该只使用按键,但我不明白的是,给定键盘上相同的击键,两个键事件如何给出不同的键码。
PS: I'm not worrying about legacy browsers support, I tried this in Chrome and was surprised, and couldn't find an explanation.
PS:我不担心旧版浏览器的支持,我在 Chrome 中尝试过这个,很惊讶,找不到解释。
回答by Tim Down
The events are for completely different purposes. Use keyup
and keydown
for identifying physical keys and keypress
for identifying typed characters. The two are fundamentally different tasks with different events; don't try to mix the two. In particular, keyCode
on keypress
events is usually redundant and shouldn't be used (except in older IE, but see the linked document below for more on that); for printable keypresses it's usually the same as which
and charCode
, although there is some variation between browsers.
这些事件的目的完全不同。使用keyup
和keydown
识别物理键和keypress
识别键入的字符。两者是具有不同事件的根本不同的任务;不要试图将两者混合。特别是,keyCode
onkeypress
事件通常是多余的,不应使用(旧版 IE 除外,但请参阅下面的链接文档了解更多信息);对于可打印的按键,它通常与which
和相同charCode
,尽管浏览器之间存在一些差异。
Jan Wolter's article on key events, already linked to in another answer, is the definitive word on this subject for me and has tables describing what each of the different properties returns for each type of key event and each browser.
Jan Wolter 关于关键事件的文章,已经在另一个答案中链接到,对我来说是关于这个主题的权威词,并且有表格描述了每种类型的关键事件和每个浏览器的每个不同属性返回的内容。
回答by Bergi
There is a good article on quirksmode.organswering exactly that question. You might also want to look at Unixpapa's results.
quirksmode.org 上有一篇很好的文章回答了这个问题。您可能还想查看Unixpapa 的结果。
回答by Mani
Well, I stumbled upon one difference when i was trying to copy user's entry from one input of the form to some other part of the form , which I had locked for my for users to edit. What i found was, that whenever a user moved to the next label using key upon completing the input, one last keyboard entry was missed in the copied entry when I used eventListener to keypress and this got resolved on using keyup.
好吧,当我试图将用户的输入从表单的一个输入复制到表单的其他部分时,我偶然发现了一个不同之处,我已将其锁定以供用户编辑。我发现,每当用户在完成输入后使用 key 移动到下一个标签时,当我使用 eventListener 进行按键操作时,复制的条目中会丢失最后一个键盘条目,并且使用 keyup 解决了这个问题。
So, in conclusion Keypress listens to the state at the instant when the key was pressed, leaving aside the result of keypress, whereas keyup listens to the system status after the key has been pressed and includes the result of the keypress.
因此,总而言之, Keypress 会侦听按键按下时的状态,不考虑 keypress 的结果,而 keyup 会侦听按键按下后的系统状态并包括按键的结果。