How to differentiate between ‘Enter’ and ‘Return’ keys in Javascript?

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 ?

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.


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

From the Mozilla Developer Network:

Possible values are:

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.

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

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

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.

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

Read More:   Detect Click into Iframe using JavaScript

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:

    var e= ev || window.event,
      key = e.keyCode || e.which;

    if ((key==13) &&
      key=176; // 176 is the scancode for the numpad enter
    // continued....

I am providing an update as this question still appears near the top of google search results.

Per MDN, KeyboardEvent.keyCode and KeyBoardEvent.charCode are deprecated and should no longer be used.

KeyboardEvent keys can be determined by accessing the KeyboardEvent.key, KeyboardEvent.code, and KeyboardEvent.location properties as necessary.

KeyboardEvent.key returns generally what you see in a text editor for output keys and the name on non-output keys (including being case-sensitive).

KeyboardEvent.code returns a string description of the key.

KeyboardEvent.location returns an integer between 0 and 3 to signify the area of the keyboard the key is located in (standard, left, right, and numpad respectively).

Understanding the difference between these properties can help to determine which will be most appropriate for your given situation. In the case of this question: event.key will return the same output ("Enter") for both the ‘carriage return’ and ‘numpad enter’keys, while event.code will return "Enter" and "NumpadEnter" respectively.

Read More:   variable is not accessible in angular.forEach

In this case, if you wanted to differentiate between numpad and keyboard keys, you could use event.code. If you wanted their operation to be the same, event.key would be a better choice.

If you wanted to differentiate between other keys, such as the left and right Ctrl keys, you would also want to look at the event.location property.

I’m adding a small keyboard event playground to see the difference between these event properties. Credit to MDN for providing the concept that I only slightly modified below:

window.addEventListener("keydown", function(event) {

  let str = "key = '" + event.key + 
              "' &nbsp code="" + event.code + """ + 
              "' &nbsp location = '" + event.location + "'" ;
  let el = document.createElement("span");
  el.innerHTML = str + "<br/>";
}, true);
#output {
  font-family: Arial, Helvetica, sans-serif;
  overflow-y: auto;
  margin-left: 4em

#output span {
  line-height: 2em;

#output :nth-child(2n) {
  color: blue;
<!-- Learn about this code on MDN: -->

  Press keys on the keyboard to see what the KeyboardEvent's key and code values are for  each one.
<div id="output"></div>

You can differentiate both by code property of the event. For the numpad one, it returns NumpadEnter and for the other one it returns Enter. Alternatively, you can also use location property which works in all cases, unlike code property. For numpad Enter, it returns 3 whereas, for other Enter it returns 0.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts