.Keycode VS. .Which

.keyCode vs. .which

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).

what is the difference between e.keyCode and e.which?

The event.which property normalizes event.keyCode and event.charCode.
It is recommended to watch event.which for keyboard key input.

As per JQuery documentation

keyCode is standard JavaScript and of course not implemented in the same way by all browsers.

JavaScript KeyCode vs CharCode

The answers to all your questions can be found on the following page.

...but in summary:

The only event from which you can reliably obtain character information (as opposed to key code information) is the keypress event.
In the keypress event, all browsers except IE <= 8 store the character code in the event's which property. Most but not all of these browsers also store the character code in the charCode property.
In the keypress event, IE <= 8 stores the character code in the keyCode property.

This means to get the character code corresponding to the keypress, the following will work everywhere, assuming a keypress event object is stored in a variable called e:

var charCode = (typeof e.which == "number") ? e.which : e.keyCode

This will generally return you a character code where one exists and 0 otherwise. There are a few cases where you'll get a non-zero value when you shouldn't:

In Opera < 10.50 for keys Insert, Delete, Home and End
In recent versions of Konqueror for non-character keys.

The workaround for the first problem is a little involved and requires using the keydown event as well.

KeyboardEvent.keyCode deprecated. What does this mean in practice?

You have three ways to handle it, as it's written on the link you shared.

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

you should contemplate them, that's the right way if you want cross browser support.

It could be easier if you implement something like this.

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};

Use event.key instead of event.keyCode

You just change it to use the name of the key being pressed. For letters it is the letter pressed, a = "a", A = "A", z = "z" etc. Number is the the string version of the number 1 = "1", 2 = "2" etc. For control keys it is the name of the key, ctrl = "Control", backspace = "Backspace", etc.

A list can be seen here

So if you are needing to test for number range you can get the key value and coerce it to a number and just do the applicable comparison, as for backspace just compare against the string "Backspace"

//coerce it to a number
numKey = +e.key;
if (!isNaN(numKey) && numKey >= 0 && numKey <= 9 ) {
// number entered, do something
} else if (e.key == "Backspace") {
// backspace pressed
}