KeyboardEvent keyCode property

DOM Events KeyboardEvent

Definition and usage

The keyCode property returns the trigger onkeypress Event The Unicode character code of the key, or trigger onkeydown or onkeyup Event The Unicode key code of the key.

The difference between the two types of codes:

  • Character code - represents the numeric value of an ASCII character
  • Key codes - represent the numeric value of the actual key on the keyboard

These types do not always mean the same thing. For example, the keyboard code for lowercase "w" and uppercase "W" is the same because the key pressed on the keyboard is the same ("W" = number "87"), but the character code is different because the resulting character is different ("w" or "W", i.e., "119" or "87"). - Please see the following examples for a better understanding.

Tip:To determine if the user pressed a printable key (such as "a" or "5"), it is recommended to use this property on the onkeypress event. To understand if the user pressed a function key (such as "F1", "CAPS LOCK", or "Home"), use the onkeydown or onkeyup events.

Note:In Firefox, the keyCode property does not work with onkeypress events (it only returns 0). For a cross-browser solution, please use which propertyFor example, use it with keyCode:

var x = event.which || event.keyCode;  // Use which or keyCode depending on browser support

Tip:For a list of all Unicode characters, please refer to our Complete Unicode Reference.

Tip:If you need to convert a Unicode value to a character, use fromCharCode() method.

Note:This property is read-only.

Note:The keyCode and which properties are provided for compatibility reasons. The latest DOM event specification recommends using the key property instead (if available).

Tip:If you want to know whether the "ALT", "CTRL", "META", or "SHIFT" keys were pressed when a key event occurred, use altKey,ctrlKey/,metaKey or shiftKey Property.

Instance

Example 1

Get the Unicode value of the pressed keyboard key:

var x = event.keyCode;

Try It Yourself

Example 2

Demonstrate the difference between character codes and keyboard codes using onkeypress and onkeydown:

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)"> 
function uniCharCode(event) {
  var char = event.which || event.keyCode;
  document.getElementById("demo").innerHTML = "Unicode CHARACTER code: " + char;
}
function uniKeyCode(event) {
  var key = event.keyCode;
  document.getElementById("demo2").innerHTML = "Unicode KEY code: " + key;
}

When pressing the "a" key on the keyboard (without using Capslock), the results of char and key will be:

Unicode CHARACTER code: 97
Unicode KEY code: 65

Try It Yourself

Example 3

If the user presses the Escape key, prompt some text:

<input type="text" onkeydown="myFunction(event)"> 
function myFunction(event) {
  var x = event.keyCode;
  if (x == 27) {  // 27 is the ESC key
    alert("You pressed the Escape key!");
  }
}

Try It Yourself

Example 4

Convert the Unicode value to a character (not applicable to function keys):

var x = event.keyCode;                // Get the Unicode value
var y = String.fromCharCode(x);       // Convert the value to a character

Try It Yourself

Syntax

event.keyCode

Technical Details

Return value: Numeric value representing the Unicode character code or Unicode key code.
DOM Version: DOM Level 2 Events

Browser Support

Properties Chrome IE Firefox Safari Opera
keyCode Support Support Support Support Support

Related Pages

HTML DOM Reference Manual:KeyboardEvent key Property

HTML DOM Reference Manual:KeyboardEvent charCode Property

HTML DOM Reference Manual:KeyboardEvent which Property

DOM Events KeyboardEvent