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

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

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.

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/>";
 
  document.getElementById("output").appendChild(el);
  
}, 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: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code -->

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

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.

Tags:

Javascript

Keycode

Recent Posts