Events & event valuesThere are keydown, keypress, and keyup events. For most keys, browser dispatches a sequence of key events like this:
- When the key is first depressed, the keydown event is sent.
- If the key is not a modifier key, the keypress event is sent.
- When the user releases the key, the keyup event is sent.
In the event object, event.which, event.keyCode and event.charCode are more relating to Javascript programming.
There is some online testing tool for these keyboard events, for instance
Using this kind of tool, we can quickly detect the keyCode, which, charCode values from keydown, keypress and keyup events.
Cross browser compatibility
However, different browsers might return different keyCode for same character. For instance, IE/Edge browser returns 229 but Chrome/Firefox returns 50 keyCode from keydown event. If we look at below comparison figure, same browser returns different keyCode value from different keyboard events. One example here is: keypress event, for same @ char, chrome returns 64 keyCode, but Firefox returns 0 keyCode.
Fortunately,
jQuery normalize browser difference for keyCode etc. Further more, jQuery recommends event.which over event.keyCode and event.charCode keyboard events.
http://api.jquery.com/event.which/
The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
event.which also normalizes button presses (mousedown and mouseupevents), reporting 1 for left button, 2 for middle, and 3 for right. Use event.which instead of event.button.
MDN (Mozilla Developer Network) has the following note:
In a keypress event, the Unicode value of the key pressed is stored in either the keyCode or charCode property, never both. If the key pressed generates a character (e.g. 'a'), charCode is set to the code of that character, respecting the letter case. (i.e. charCode takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in keyCode. charCode is never set in the keydown and keyup events. In these cases, keyCode is set instead.
Different Keyboard Layouts
Same character might have different keyCode when using foreign keyboard layouts
Stackoverflow gives some simple solution as below for different keyboard layouts compatiblity:
Use onkeypress to ascertain the correct character code for the key that was pressed. In the event handler, check the event.which and event.keyCode properties:
function whichKey(evt) {
alert(String.fromCharCode(evt.which || evt.keyCode));
}
KeyboardEvent.key to the rescue?
Model browsers start to support KeyboardEvent.key which should be used to replace charCode etc.
The definition of 'KeyboardEvent.key' is in "Document Object Model (DOM) Level 3 Events Specification" Working Draft (as of August 2017).
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
http://caniuse.com/#feat=keyboardevent-key
Apart from Android browsers, IE11/Edge, other modern browsers have support event.key.
Conclusion
Explore event.key if your web app doesn't need to support legacy browsers.
Use event.which, event.keyCode, and event.charCode wisely in different keyboard events.
