YouTip LogoYouTip

Event Key Keycode

[![Image 1: Event Object Reference Manual](#) Event Object](#) ## Example Get the Unicode value of the pressed keyboard key: var x = event.keyCode; The output value of _x_ is: 119 // 119 is the character "w" [Try it yourself Β»](#) More examples are provided at the bottom of this article. * * * ## Definition and Usage The keyCode property returns the character code of the key that triggered the (#) event, or the key code for the (#) or (#) events. The difference between these two types of codes is: * Character code β€” a numeric value representing an ASCII character * Key code β€” a numeric value representing the actual key on the keyboard The values of these two types are not always equal. For example, the lowercase character "w" and uppercase character "W" share the same key code because they correspond to the same physical key on the keyboard ("W" has a key code of "87"), but they have different character codes, resulting in different outputs ("w" and "W" have character codes "119" and "87", respectively). See the examples below for better understanding. **Tip:** If you need to determine whether the user pressed a printable key (e.g., "a" or "5"), use the onkeypress event. If you need to detect function keys (e.g., "F1", "CAPS LOCK", or "Home"), use the onkeydown or onkeyup events. **Note:** In Firefox, the keyCode property is invalid in the onkeypress event (it returns 0). To address browser compatibility issues, you can use both the (#) and keyCode properties together: var x = event.which || event.keyCode; // Use **which** or **keyCode**, enabling cross-browser support **Tip:** A complete list of Unicode characters is available in our (#). **Tip:** To convert a Unicode value into its corresponding character, use the [fromCharCode()](#) method. **Note:** This property is read-only. **Note:** The which and keyCode properties provide solutions for browser compatibility issues. The latest DOM Events specification recommends using the (#) property instead. **Tip:** To check whether the "ALT", "CTRL", "META", or "SHIFT" keys were pressed, use the (#), (#), (#), or (#) properties. * * * ## Browser Support | Property | | | | | | | --- | --- | --- | --- | --- | --- | | keyCode | Yes | Yes | Yes | Yes | Yes | * * * ## Syntax _event_.keyCode ## Technical Details | Return Value: | A number representing either the Unicode character code or the Unicode key code | | --- | | DOM Version: | DOM Level 2 Events | * * * ![Image 2: Example](#) ## More Examples ## Example Demonstrating the difference between character codes and key codes using onkeypress and onkeydown: 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 (without Caps Lock), the output is: Unicode CHARACTER code: 97 Unicode KEY code: 65 [Try it yourself Β»](#) ## Example Display an alert when the Esc key is pressed: 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 its corresponding character (does not work 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: (#) HTML DOM Reference Manual: (#) HTML DOM Reference Manual: (#) [![Image 3: Event Object Reference Manual](#) Event Object](#)
← Event Key LocationEvent Key Key β†’