keypress and keyup - why is the keyCode different?
JavascriptKeyboardJavascript Problem Overview
Related: https://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
Here is some code you can try at home or in a 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?
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.
Javascript Solutions
Solution 1 - Javascript
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.
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.
Solution 2 - Javascript
There is a good article on quirksmode.org answering exactly that question. You might also want to look at Unixpapa's results.
Solution 3 - Javascript
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
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.