keyCodeevent property

事件对象参考手册event object

Example

Get the Unicode value of the pressed keyboard key:

var x = event.keyCode;

xThe output result is:

119 // 119 is the character "w"

Try it Yourself »

This article contains more examples at the bottom.

Definition and Usage

The keyCode property returnsonkeypressthe character code of the key value that triggered the event, oronkeydownoronkeyupthe key code of the event.

The difference between the two types of codes is:

  • Character code - a number representing an ASCII character
  • Keyboard code - a number representing the actual key on the keyboard

The two types of values are not always equal. For example, lowercase "w" and uppercase "W" have the same keyboard code because they are the same key on the keyboard (the "W" code is "87"), but they have different character codes, and the output of the two characters is different (the "w" and "W" character codes are "119" and "87") - see the examples below for a better understanding.

Tip:If you need to know whether the user pressed a printing key (such as "a" or "5"), it is recommended to use the onkeypress event. If you need to know whether the user pressed a function key (such as "F1", "CAPS LOCK" or "Home"), you can use the onkeydown or onkeyup event.

Note:In Firefox, the keyCode property is invalid in the onkeypress event (returns 0). For browser compatibility, you can use bothwhichand the keyCode property together to solve it:

var x = event.which || event.keyCode; // useswhichorkeyCode, this way it can support different browsers

Tip:For a list of all Unicode characters, see ourComplete Unicode Reference Manual。

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

Note:This property is read-only.

Note:The which and keyCode properties provide a way to solve browser compatibility. The latest version of DOM events recommends using thekeyproperty to replace this method.

Tip:If you want to check whether the "ALT", "CTRL", "META" or "SHIFT" key is pressed, you can use thealtKey, ctrlKey, metaKeyorshiftKeyproperty.

Browser Support

Property
keyCode Yes Yes Yes Yes Yes

Syntax

event.keyCode

Technical Details

Return Value: A number, representing a Unicode character code or a Unicode key code
DOM Version: DOM Level 2 Events

实例

More Examples

Example

Use onkeypress and onkeydown to demonstrate the difference between character codes and keyboard codes:

<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 the "a" key is pressed on the keyboard (without Caps Lock), the output is as follows:

Unicode character code: 97
Unicode key code: 65

Try it Yourself »

Example

If the Esc key is pressed, a prompt message pops up:

<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

Convert a Unicode value to a character (not available for function keys):

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

Try it Yourself »

Related Pages

HTML DOM Reference Manual:key event property

HTML DOM Reference Manual:keyCode event property

HTML DOM Reference Manual:which event property

事件对象参考手册event object

Other Extensions