The event property

The event property The event object

Get the Unicode value of the keyboard key pressed:

var x = event.which;

x The output is:

119 // 119 is the character "w"

Try it out . . .

More examples are included at the bottom of this article.

Define and use

The who property returns the character code for the value of the key triggered by the onkeypress event, or the code for the key for the onkeydown or onkeyup event.

The difference between the two types of code is:

  • Character Code - A number that represents an ASCII character
  • Keyboard code - represents the number of real keys on the keyboard

Both types of values are not equal, such as the small-case characters "w" and the uppercase characters "W" have the same keyboard code because they are on the keyboard ("W" code is "87"), but they have different character codes and the two character outputs are different ("w" and "W" character codes are "119" and "87") - it is better to look at the following examples.

Tip: The onkeypress event is recommended if you need to know that the user is pressing a print key, such as "a" or "5". If you need to know that the user is pressing a function key (such as "F1," "CAPSLOCK" or "Home"), you can use the onkeydown or onkeyup events.

Note: T he version property is not supported by IE8 and its earlier versions. T he keyCode property can be used by unsupported browsers. H owever, the keyCode property is not valid in the Firefox browser's onkeypress event. Compatible with these browsers you can use the following code:

var x = event.which || e vent.keyCode; Use which or keyCode, which supports different browsers

Tip: A list of all Unicode characters can be found in our full Unicode reference manual.

Tip: If you need to convert Unicode values to characters, you can use the fromCharCode() method.

Note: This property is read-only.

Note: The which and keyCode properties provide a way to resolve browser compatibility, and the latest version of the DOM event recommends using the key property instead.

Tip: If you want to see if you press the "ALT", "CTRL", "META" or "SHIFT" keys, you can use the altKey, ctrlKey, metaKey, or shiftKey properties.

Browser support

The numbers in the table support the version number of the first browser for this property.

Property
which Yes 9.0 Yes Yes Yes

Grammar

event .which

Technical details

Return value: A number that represents a Unicode character code or a Unicode key code
DOM version: DOM Level 2 Events

The event property

More instances

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

<input type= "text" onkeypress= "uniCharCode(event)" onkeydown= "uniKeyCode(event)" >

function uniCharCode(event) {
var char = event.which || e vent.keyCode; event.keyCode is used for IE8 and earlier
document.getElementById( "demo" ).innerHTML = "Unicode CHARACTER code: " +char;
}

function uniKeyCode(event) {
var key = event.which|| e vent.keyCode; event.keyCode is used for IE8 and earlier
document.getElementById( "demo2" ).innerHTML = "Unicode KEY code: " + key;
}

When the "a" key is pressed on the keyboard (no capital locking is used), the output is as follows:

Unicode character code: 97
Unicode keyboard code: 65

Try it out . . .

If you press the Esc key to pop up the prompt:

<input type= "text" onkeydown= "myFunction(event)" >

function myFunction(event) {
var x = event.which || e vent.keyCode; event.keyCode is used for IE8 and earlier
if (x == 27 ) { 27 is the ESC key
alert ( "You pressed the Escape key!" );
}
}

Try it out . . .

Convert Unicode values to characters (not for function keys):

var x = event.which || e vent.keyCode; Gets the Unicode value
var y = String.fromCharCode(x); Convert values to characters

Try it out . . .

Related pages

HTML DOM Reference Manual: Key Event Properties

HTML DOM Reference Manual: KeyCode Event Properties

HTML DOM Reference Manual: charCode Event Properties

The event property The event object