.keyCode vs. .which
I'd recommend event.key
currently. MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
event.KeyCode
and event.which
both have nasty deprecated warnings at the top of their MDN pages:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which
For alphanumeric keys, event.key
appears to be implemented identically across all browsers. For control keys (tab, enter, escape, etc), event.key
has the same value across Chrome/FF/Safari/Opera but a different value in IE10/11/Edge (IEs apparently use an older version of the spec but match each other as of Jan 14 2018).
For alphanumeric keys a check would look something like:
event.key === 'a'
For control characters you'd need to do something like:
event.key === 'Esc' || event.key === 'Escape'
I used the example here to test on multiple browsers (I had to open in codepen and edit to get it to work with IE10): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
event.code
is mentioned in a different answer as a possibility, but IE10/11/Edge don't implement it, so it's out if you want IE support.
Note: The answer below was written in 2010. Here many years later, both keyCode
and which
are deprecated in favor of key
(for the logical key) and code
(for the physical placement of the key). But note that IE doesn't support code
, and its support for key
is based on an older version of the spec so isn't quite correct. As I write this, the current Edge based on EdgeHTML and Chakra doesn't support code
either, but Microsoft is rolling out its Blink- and V8- based replacement for Edge, which presumably does/will.
Some browsers use keyCode
, others use which
.
If you're using jQuery, you can reliably use which
as jQuery standardizes things; More here.
If you're not using jQuery, you can do this:
var key = 'which' in e ? e.which : e.keyCode;
Or alternatively:
var key = e.which || e.keyCode || 0;
...which handles the possibility that e.which
might be 0
(by restoring that 0
at the end, using JavaScript's curiously-powerful ||
operator).
jQuery normalises event.which
depending on whether event.which
, event.keyCode
or event.charCode
is supported by the browser:
// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
event.which = event.charCode != null ? event.charCode : event.keyCode;
}
An added benefit of .which
is that jQuery does it for mouse clicks too:
// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}
If you are staying in vanilla Javascript, please note keyCode is now deprecated and will be dropped:
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any tim
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
Instead use either: .key or .code depending on what behavior you want: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
Both are implemented on modern browsers.