51

Related: JavaScript KeyCode vs CharCode

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.

Improve this question
1

3 Answers 3

Reset to default
50

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I understand that the purposes are different, it doesn't answer the fact that the keyCode is different, even though the keys are the same.
@FlorianMargaine: There are tables on Jan Wolter's page showing what each property returns for each event. For WebKit (and indeed most browsers now), keyCode returns the same as which and charCode for keypress events, which is the character code corresponding to the character typed, as opposed to the key code of the key pressed (as it is in keyup and keydown).
I had to carefully read the article for this part: 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. :) thanks for your answer btw!
2

There is a good article on quirksmode.org answering exactly that question. You might also want to look at Unixpapa's results.

Improve this answer

4 Comments

quirksmode especially says: for instance, a lower case 'a' and an upper case 'A' have the same keyCode, which is why I don't understand. Is there something I missed? The second article is linked in the related question :)
They are the same key on your keyboard, just with different modifiers (shift). Keyup/down is for the keystrokes, keypress for the typed text.
So they should give the same keyCode. Why don't they depending on the event?
No, up and down should give the same keyCode, press should give 0. But IE, Opera and seemingly Chrome give the charCode on-press as "keyCode".
0

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.

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.