Alphanumeric key code values(keyCode) | |||||||
button | Key code | button | Key code | button | Key code | button | Key code |
A | 65 | J | 74 | S | 83 | 1 | 49 |
B | 66 | K | 75 | T | 84 | 2 | 50 |
C | 67 | L | 76 | U | 85 | 3 | 51 |
D | 68 | M | 77 | V | 86 | 4 | 52 |
E | 69 | N | 78 | W | 87 | 5 | 53 |
F | 70 | O | 79 | X | 88 | 6 | 54 |
G | 71 | P | 80 | Y | 89 | 7 | 55 |
H | 72 | Q | 81 | Z | 90 | 8 | 56 |
I | 73 | R | 82 | 0 | 48 | 9 | 57 |
Key code values for keys on the numeric keypad(keyCode) | Function key key code value(keyCode) | ||||||
button | Key code | button | Key code | button | Key code | button | Key code |
0 | 96 | 8 | 104 | F1 | 112 | F7 | 118 |
1 | 97 | 9 | 105 | F2 | 113 | F8 | 119 |
2 | 98 | * | 106 | F3 | 114 | F9 | 120 |
3 | 99 | + | 107 | F4 | 115 | F10 | 121 |
4 | 100 | Enter | 108 | F5 | 116 | F11 | 122 |
5 | 101 | - | 109 | F6 | 117 | F12 | 123 |
6 | 102 | . | 110 | ||||
7 | 103 | / | 111 |
Control key code value(keyCode) | |||||||
button | Key code | button | Key code | button | Key code | button | Key code |
BackSpace | 8 | Esc | 27 | Right Arrow | 39 | -_ | 189 |
Tab | 9 | Spacebar | 32 | Dw Arrow | 40 | .> | 190 |
Clear | 12 | Page Up | 33 | Insert | 45 | /? | 191 |
Enter | 13 | Page Down | 34 | Delete | 46 | `~ | 192 |
Shift | 16 | End | 35 | Num Lock | 144 | [{ | 219 |
Control | 17 | Home | 36 | ;: | 186 | /| | 220 |
Alt | 18 | Left Arrow | 37 | =+ | 187 | ]} | 221 |
Cape Lock | 20 | Up Arrow | 38 | ,< | 188 | '" | 222 |
Multimedia key code value(keyCode) | |||||||
button | Key code | button | Key code | button | Key code | button | Key code |
Volume up | 175 | ||||||
Volume down | 174 | ||||||
stop | 179 | ||||||
Mute | 173 | ||||||
Browser | 172 | ||||||
180 | |||||||
search for | 170 | ||||||
Favorite | 171 |
The keyCode (or key code) refers to the numerical code assigned to a particular key on a keyboard. It is used in JavaScript to detect which key was pressed in response to a keyboard event (like keydown, keypress, or keyup).
How to Get the KeyCode in JavaScript
JavaScript provides a KeyboardEvent object that contains the keyCode property, which can be used to identify the key pressed by the user.
Here is a basic example:
JavaScript Example to Get KeyCode:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get KeyCode</title>
</head>
<body>
<h1>Press any key to get its KeyCode</h1>
<div id="output"></div>
<script>
// Add an event listener for the keydown event
document.addEventListener('keydown', function(event) {
// Get the keyCode from the event object
let keyCode = event.keyCode;
let keyName = event.key; // Get the name of the key pressed (e.g., "a", "Enter")
// Display the keyCode and key name in the output div
document.getElementById("output").innerHTML = `Key: ${keyName}, KeyCode: ${keyCode}`;
});
</script>
</body>
</html>
Explanation of the Code:
Event Listener: An event listener is added to the document to listen for the keydown event.
event.keyCode: This property returns the numeric key code of the key pressed. For example, when the "Enter" key is pressed, event.keyCode would be 13.
event.key: This property returns the name of the key pressed as a string (e.g., 'a', 'Enter').
Example Key Codes:
Here are some common key codes for different keys:
Key Name KeyCode
Enter 13
Space 32
ArrowUp 38
ArrowDown 40
ArrowLeft 37
ArrowRight 39
Backspace 8
Tab 9
Shift 16
Control 17
Alt 18
Escape 27
Delete 46
A 65
Z 90
1 49
Notes on KeyCode:
keyCode is deprecated: In modern web development, it's recommended to use the key property, which provides more descriptive values (like 'a', 'Enter').
keyCode for non-printable keys: For example, special keys like Enter, Backspace, Arrow keys, etc., are also represented by specific key codes.
Example Using event.key Instead of keyCode:
javascript
document.addEventListener('keydown', function(event) {
let keyName = event.key; // This will give the name of the key, like 'Enter', 'a', etc.
document.getElementById("output").innerHTML = `Key: ${keyName}`;
});
This is a better approach for most modern web applications since key is easier to read and provides a more consistent result across browsers and devices.
Conclusion:
keyCode can be used to get the key code of the key that is pressed during a keyboard event.
event.key is the recommended modern approach to get the key name, which is more intuitive.
You can use JavaScript event listeners to capture keypress events and extract the key codes or key names for your use case.