KeyCode Reference
Keyboard key codes reference with live key press demo. keyCode (deprecated), key and code.
Back to all tools on ToolForge
Live Demo
Click the box below and press any key to see its values.
Press a key…
Understanding Key Event Properties
// Modern approach (recommended)
element.addEventListener('keydown', (e) => {
console.log('key:', e.key); // Character value: 'a', 'A', 'Enter'
console.log('code:', e.code); // Physical key: 'KeyA', 'Enter'
// Check modifiers
if (e.ctrlKey) console.log('Ctrl pressed');
if (e.altKey) console.log('Alt pressed');
if (e.shiftKey) console.log('Shift pressed');
if (e.metaKey) console.log('Meta/Command pressed');
});
// Legacy (deprecated but still works)
element.addEventListener('keydown', (e) => {
console.log('keyCode:', e.keyCode); // Number: 65 for 'A'
});
Common Key Codes Reference
| Key | keyCode | key | code |
|---|---|---|---|
| Backspace | 8 | Backspace | Backspace |
| Tab | 9 | Tab | Tab |
| Enter | 13 | Enter | Enter |
| Shift | 16 | Shift | ShiftLeft/ShiftRight |
| Ctrl | 17 | Control | ControlLeft/ControlRight |
| Alt | 18 | Alt | AltLeft/AltRight |
| Caps Lock | 20 | CapsLock | CapsLock |
| Escape | 27 | Escape | Escape |
| Space | 32 | | Space |
| Page Up | 33 | PageUp | PageUp |
| Page Down | 34 | PageDown | PageDown |
| End | 35 | End | End |
| Home | 36 | Home | Home |
| Arrow Left | 37 | ArrowLeft | ArrowLeft |
| Arrow Up | 38 | ArrowUp | ArrowUp |
| Arrow Right | 39 | ArrowRight | ArrowRight |
| Arrow Down | 40 | ArrowDown | ArrowDown |
| Insert | 45 | Insert | Insert |
| Delete | 46 | Delete | Delete |
| 0–9 | 48–57 | 0–9 | Digit0–Digit9 |
| A–Z | 65–90 | a/A | KeyA–KeyZ |
| F1–F12 | 112–123 | F1–F12 | F1–F12 |
| Num Lock | 144 | NumLock | NumLock |
| Scroll Lock | 145 | ScrollLock | ScrollLock |
| ; (semicolon) | 186 | ; | Semicolon |
| = (equals) | 187 | = | Equal |
| , (comma) | 188 | , | Comma |
| - (minus) | 189 | - | Minus |
| . (period) | 190 | . | Period |
| / (slash) | 191 | / | Slash |
| ` (backtick) | 192 | ` | Backquote |
| [ (bracket) | 219 | [ | BracketLeft |
| \ (backslash) | 220 | \ | Backslash |
| ] (bracket) | 221 | ] | BracketRight |
| ' (quote) | 222 | ' | Quote |
About KeyCode Reference
This reference lists keyboard key codes for JavaScript key events. The keyCode property is deprecated; prefer key and code for new code.
The key property returns the character value (affected by Shift and keyboard layout), while code returns the physical key location (unaffected by modifiers or layout). This distinction is important for international keyboards and shortcut implementations.
Keyboard Event Types
| Event | Description | Use Case |
|---|---|---|
keydown | Fires when key is first pressed, repeats while held | Shortcuts, game controls, preventing defaults |
keypress | Deprecated. Fires only for character keys | Avoid; use keydown with key property instead |
keyup | Fires when key is released | Release detection, cleanup, toggle states |
Modifier Key Reference
| Property | Key | Mac Equivalent |
|---|---|---|
e.ctrlKey | Control | Control |
e.altKey | Alt | Option |
e.shiftKey | Shift | Shift |
e.metaKey | Windows key | Command |
Common Shortcut Patterns
// Save shortcut (Ctrl+S / Cmd+S)
document.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
saveDocument();
}
});
// Escape to close modal
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modal.isOpen) {
modal.close();
}
});
// Arrow key navigation
element.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowUp': moveUp(); break;
case 'ArrowDown': moveDown(); break;
case 'ArrowLeft': moveLeft(); break;
case 'ArrowRight': moveRight(); break;
}
});
// Detect specific key by code (layout-independent)
document.addEventListener('keydown', (e) => {
if (e.code === 'KeyS') {
// Fires for physical S key regardless of layout
}
});
Frequently Asked Questions
- What is the difference between keyCode, key, and code?
- keyCode (deprecated) returns a numeric code (e.g., 65 for 'A'). key returns the character value (e.g., 'a' or 'A' depending on Shift). code returns the physical key location (e.g., 'KeyA' regardless of layout or modifiers). Modern code should use key and code; keyCode is deprecated but still widely supported.
- Why is keyCode deprecated?
- keyCode is deprecated because it's ambiguous and layout-dependent. The same keyCode can represent different characters on different keyboard layouts. The key and code properties provide clearer semantics: key gives the actual character, code gives the physical key position. Use key for character input, code for keyboard shortcuts.
- What keyboard events are available in JavaScript?
- Three main keyboard events: keydown (fires when key is pressed, repeats while held), keypress (deprecated, fires for character keys only), keyup (fires when key is released). Use keydown for shortcuts and game controls, keyup for release detection. Attach listeners to document, window, or focused elements.
- How do I detect modifier keys (Ctrl, Alt, Shift)?
- Use the event properties: ctrlKey, altKey, shiftKey, metaKey (Command on Mac). Example: if (e.ctrlKey && e.key === 's') for Ctrl+S shortcut. These boolean properties work with both keydown and keyup events. metaKey detects the Command key on Mac and Windows key on Windows.
- What are common key values for shortcuts?
- Common shortcut keys: Enter ('Enter'), Escape ('Escape'), Space (' '), Tab ('Tab'), Arrow keys ('ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'), Function keys ('F1'-'F12'). For letters/numbers, key returns the character ('a'-'z', '0'-'9'), code returns physical location ('KeyA'-'KeyZ', 'Digit0'-'Digit9').
- How do I prevent default keyboard behavior?
- Call event.preventDefault() in the keydown handler to prevent default behavior (e.g., form submission on Enter, page scroll on Space). Example: e.preventDefault() before processing shortcuts. Be cautious: blocking defaults can harm accessibility. Only prevent when you provide alternative functionality.