Developer Tools
Keyboard Event Tester
Press any key to see event.key, event.code, event.keyCode, location, modifiers, repeat, and isComposing. Live JavaScript snippet and history log.
Press any key
Click this panel or tab to it to start listening.
Waiting for a key press...
Event fields
Press any key inside the capture panel above to see every field of the DOM KeyboardEvent.
JavaScript snippet
Generated from your last key press. Pick which field your handler should compare against.
// Press a key to generate a snippet
Use event.code for keybindings (works across keyboard layouts) and event.key for what the user actually typed (respects layout, shift, and dead keys).
Event history
Most recent first, last 30 events.
History is empty. Press a key inside the capture panel to start logging events.
Typed string preview
Concatenates printable keys, treats Backspace as delete, and turns Enter into a newline. Ignores keys held with Ctrl or Meta so it does not collide with browser shortcuts.
(empty)
This is what event.key produces in sequence. It mirrors the value you would get inside an <input> or contenteditable.
key vs code vs keyCode
event.key
Logical character produced after the keyboard layout, shift, and dead keys are applied. Use it when you need to know what the user typed.
event.code
Physical key on a US-QWERTY keyboard, independent of the user's layout. Use it for keybindings like WASD that need to work the same on AZERTY, Dvorak, and QWERTY.
event.keyCode
Legacy numeric code. Deprecated in modern browsers but still referenced everywhere. Read-only and safe for compatibility checks; do not write new code that depends on it.
Common keys reference
Quick lookup for keys developers ask about most. Press the same key inside the capture panel above to confirm the behavior on your own keyboard, browser, and operating system.
| Key | event.key | event.code | event.keyCode | Note |
|---|---|---|---|---|
| Letter A | a | KeyA | 65 | Shift produces key='A'. Code stays KeyA on every layout. |
| Digit 1 | 1 | Digit1 | 49 | Top-row 1. The numpad 1 sends Numpad1 with the same keyCode. |
| Enter | Enter | Enter | 13 | Numpad Enter sends code='NumpadEnter' with location=3. |
| Escape | Escape | Escape | 27 | Always key='Escape', code='Escape'. |
| Spacebar | (space) | Space | 32 | key is a single space character, code='Space'. |
| Tab | Tab | Tab | 9 | Browsers move focus on Tab, so keyup may not fire. |
| Backspace | Backspace | Backspace | 8 | Outside form fields, browsers may navigate back. |
| Arrow Up | ArrowUp | ArrowUp | 38 | Modern apps prefer event.key for arrows. |
| Arrow Down | ArrowDown | ArrowDown | 40 | keyCode 40 is the legacy value. |
| Arrow Left | ArrowLeft | ArrowLeft | 37 | Right-to-left layouts swap the visual direction, not the code. |
| Arrow Right | ArrowRight | ArrowRight | 39 | Pair with ArrowLeft for slider controls. |
| Shift (left) | Shift | ShiftLeft | 16 | Right Shift sends code='ShiftRight' with location=2. |
| Control (left) | Control | ControlLeft | 17 | On macOS this is the Control key, not Cmd. |
| Alt (left) | Alt | AltLeft | 18 | Often labeled Option on macOS keyboards. |
| Meta (left) | Meta | MetaLeft | 91 | Cmd on macOS, the Windows key on Windows, Super on Linux. |
| Caps Lock | CapsLock | CapsLock | 20 | Some OSes only fire keydown when Caps engages. |
| Function F1 | F1 | F1 | 112 | Browsers usually intercept F1 for help. |
| Numpad 0 | 0 | Numpad0 | 96 | Numpad digits have a different code than the top row. |
| Numpad + | + | NumpadAdd | 107 | Pairs with Subtract / Multiply / Divide / Decimal. |
| Slash | / | Slash | 191 | Some layouts swap this to a different key under shift. |
Some keys (Caps Lock, Num Lock, Scroll Lock, function keys, and many OS-reserved combos like Cmd+Q, Alt+F4, Ctrl+W) can fail to fire or fire only on keydown because the operating system or browser handles them first. The reference rows show the canonical expected values.
How to use
- Click the capture panel at the top of the page (or press Tab to focus it). A blue glow shows when it is listening.
- Press any key. The latest combination, every event field, and the modifier badges update on the next keydown.
- Read the four canonical fields (event.key, event.code, event.keyCode, event.location) along with repeat and isComposing in the event fields panel.
- Pick a snippet mode (event.code, event.key, event.keyCode, or full combo) and copy the generated JavaScript handler for your shortcut or hotkey logic.
- Use the event history table to confirm the firing order of keydown and keyup, including auto-repeat. Use Clear to reset the latest event, history, and typed string preview.
- Toggle Block browser default off if you want the browser to handle Tab, arrows, space, Backspace, and Enter normally. Leave it on while testing so the page keeps focus.
About this tool
Keyboard Event Tester captures every property of the DOM KeyboardEvent so you can confirm the exact values your shortcut, hotkey, or game-control handler will receive. Press any key inside the capture surface and the page shows event.key (the logical character produced after the keyboard layout, shift, alt-graph, and dead keys are applied), event.code (the physical key on a US-QWERTY keyboard, layout-independent and the field you should use for keybindings like WASD), the legacy event.keyCode and event.which numeric values that older references and cross-browser libraries still cite, event.location to tell left and right Shift / Ctrl / Alt apart from the numeric keypad, the .repeat flag for held-down keys that fire repeatedly, and event.isComposing for IME composition (important when handling CJK input). The four modifier states (Ctrl, Shift, Alt / Option, Meta / Cmd / Win) appear as a row of badges that light up while a modifier is held so you can visually verify chord detection. A live JavaScript snippet panel below the event fields generates a copy-paste-ready if (event.code === ...) or if (event.key === ...) handler from your last key press, with a Full combo mode that includes every modifier check at once. An event history table logs the last thirty keydown and keyup events with timestamps so you can verify the firing order of complex sequences. A typed-string preview area concatenates printable keys, treats Backspace as delete, and turns Enter into a newline so you can see exactly how event.key would behave inside an input or contenteditable. A built-in reference table covers the keys developers ask about most: letters, digits, Enter, Escape, Space, Tab, Backspace, the four arrows, Shift / Ctrl / Alt / Meta with location notes, Caps Lock, function keys, and the numpad. Useful for debugging keyboard shortcut handlers, building accessible custom widgets that respond to the right ARIA keyboard pattern, choosing between event.key and event.code for a hotkey library, picking the correct keyCode for legacy code, building game controls that survive keyboard layout changes, teaching DOM events, and confirming what your operating system or browser is intercepting before your handler runs. Everything happens in your browser. The keys you press never leave the page, and there is no signup, login, or account.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
Regex Tester
Live regex testing with highlights, capture groups, and replacement preview.
Open tool
TextUnicode Character Inspector
Per-character breakdown with code points, UTF-8/UTF-16 bytes, and hidden character detection.
Open tool
DeveloperASCII Table
Searchable ASCII reference plus a two-way text-to-code converter.
Open tool
DeveloperHTML Entity Encoder Decoder
Two-way HTML entity encoder and decoder with named, decimal, and hex modes.
Open tool
DeveloperUser Agent Parser
Decode any User-Agent into browser, engine, OS, device, and bot info.
Open tool