ZeroTool Workbench
JavaScript Keycode Explorer
Press any key to instantly see event.key, event.code, keyCode, charCode, location, repeat, and modifier states. Ready-to-copy JS snippet. 100% client-side, no setup.
How to Use
- Click the capture pad — it grabs keyboard focus automatically on first load.
- Press any key. Modifier keys, function keys, and arrow keys all work.
- Read off event.key, event.code, and the legacy keyCode / which / charCode values.
- Modifier pills light up when Shift / Ctrl / Alt / Meta are held.
- Copy the generated JS snippet to use the exact match expression in your code.
event.key vs event.code vs keyCode
Most front-end keyboard bugs come from mixing these three. Use this table as a reference:
| Property | Layout-aware | Recommended | Example for A on QWERTY |
|---|---|---|---|
| event.key | Yes (reflects active layout) | Yes — semantic checks | ”a” or “A” with Shift |
| event.code | No (physical position) | Yes — game / shortcut bindings | ”KeyA” |
| keyCode | No | No — deprecated | 65 |
| which | No | No — deprecated | 65 |
| charCode | No | No — deprecated, 0 on keydown | 0 |
Common Use Cases
- Debugging keyboard handlers — paste the exact event.key into your conditionals to fix typos.
- Building game controls — prefer event.code so WASD works on AZERTY layouts.
- Wiring command palettes — combine event.key with e.ctrlKey / e.metaKey checks.
- Auditing legacy code — read keyCode / which to map old handlers to event.key.
- Identifying composing state — e.isComposing = true means an IME is active, so single-key handlers should bail out.
Preventing Default Behavior
The capture pad calls preventDefault() only on Tab, Space, Backspace, Arrows, and F1-F12 — keys
the browser would otherwise consume for navigation or page actions. System shortcuts like Ctrl+W / Cmd+Q
are not intercepted; they continue to do their default thing.
FAQ
What's the difference between event.key, event.code, and keyCode?
event.key is the printable character or named key value after the keyboard layout is applied (so the 'A' key on a Dvorak layout reports event.key = 'a' even though the physical position is different). event.code is the physical key position on a standard US QWERTY layout (KeyA, Digit1, ArrowUp) and stays constant regardless of layout. keyCode is the legacy numeric code (e.g. 65 for A) — it's deprecated but still emitted for backward compatibility.
Why are keyCode, which, and charCode deprecated?
All three are inconsistent across browsers and ambiguous for non-Latin layouts. Modern code should use event.key (semantic) or event.code (physical). The MDN spec marks keyCode and charCode as 'deprecated, not recommended for production' but mainstream browsers still emit them for compatibility — this tool shows the raw values so you can audit legacy code.
How do I check for Shift / Ctrl / Alt / Meta modifier keys?
Read e.shiftKey, e.ctrlKey, e.altKey, and e.metaKey directly on the KeyboardEvent — each is a boolean reflecting whether the modifier was held while the key fired. Note: e.metaKey is the Windows / Command key. The generated snippet on this page composes the right modifier clause for you.
Does this work on mobile?
Physical keyboard events differ across mobile platforms — many on-screen keyboards do not emit keydown for individual characters and you only get an 'input' event with the resulting string. This tool is built for desktop browsers where physical key signals are reliable. A mobile fallback input is available for partial readout, but for full event property inspection use a desktop browser. By design, no mobile-keydown emulation is attempted.
Is any keypress data sent to a server?
No. All event handling runs in your browser via the KeyboardEvent API. Nothing about which key you pressed leaves your device. Open DevTools → Network to confirm.