How to differentiate between 'Enter' and 'Return' keys in Javascript?

Question

Some desktop apps treat the 'carriage return' key and the numpad's 'enter' key differently. I've noticed that these two keys generate the same keyCode (13) in Javascript (jQuery).

Are they converted to be equal in the browser environment, or is it possible to differentiate between them (ie. make the CR make a new line in a text area, and the 'enter' key submit it's form ?

Answer 1

If there is a key on the keyboard that is physically different, browser applications should be just as capable as desktop applications to differentiate.

With the latest versions of Chrome (39.0.2171.95 m), Firefox (32.0.3), IE (11.0.9600.17501) and Opera (12.17), the keyboard event object now has the location property. I would presume this property has been around for a while, although it is lightly documented.

Tests of onkeydown reveal that when the "normal" enter key is pressed, keyCode=13 and location=0; when the numpad enter is pressed, keyCode=13 and location=3.

So the following code can be used to set key==13 if the enter, key==176 if numpad enter:

window.onkeydown=function(ev) {     var e= ev || window.event,       key = e.keyCode || e.which;      if ((key==13) &&         (e.location===3))       key=176; // 176 is the scancode for the numpad enter     // continued.... } 

Answer 2

See Jan Wolters’ treatise on Javascript Madness: Keyboard Events.

Enter and Numpad Enter both give the same keycode, i.e. 13, because browsers do not differentiate between the two keys. To be honest, nor do most environments. It is possible to differentiate between them using the Windows API (for example), but it does take extra effort to do so. This, however, falls outside the scope of the browser’s abstraction.

UPDATE

As Bill Thorne rightfully mentions, the KeyboardEvent object sports a location property nowadays.

From the Mozilla Developer Network:

Possible values are:

DOM_KEY_LOCATION_STANDARD 0 The key has only one version, or can't be distinguished between the left and right versions of the key, and was not pressed on the numeric keypad or a key that is considered to be part of the keypad.

DOM_KEY_LOCATION_LEFT 1 The key was the left-hand version of the key; for example, the left-hand Control key was pressed on a standard 101 key US keyboard. This value is only used for keys that have more that one possible location on the keyboard.

DOM_KEY_LOCATION_RIGHT 2 The key was the right-hand version of the key; for example, the right-hand Control key is pressed on a standard 101 key US keyboard. This value is only used for keys that have more that one possible location on the keyboard.

DOM_KEY_LOCATION_NUMPAD 3 The key was on the numeric keypad, or has a virtual key code that corresponds to the numeric keypad.

Note: When NumLock is locked, Gecko always returns DOM_KEY_LOCATION_NUMPAD for the keys on the numeric pad. Otherwise, when NumLock is unlocked and the keyboard actually has a numeric keypad, Gecko always returns DOM_KEY_LOCATION_NUMPAD too. On the other hand, if the keyboard doesn't have a keypad, such as on a notebook computer, some keys become Numpad only when NumLock is locked. When such keys fires key events, the location attribute value depends on the key. That is, it must not be DOM_KEY_LOCATION_NUMPAD. Note: NumLock key's key events indicate DOM_KEY_LOCATION_STANDARD both on Gecko and Internet Explorer.