Keyboard Event Tester
Press any key to see its JavaScript event properties: keyCode, key, code, charCode, and modifier states. Essential for debugging keyboard shortcut handlers.
Click here, then press any key
Key event details will appear here
Common Key Codes Reference
| Key | event.key | event.code | keyCode |
|---|---|---|---|
| Enter | "Enter" | "Enter" | 13 |
| Escape | "Escape" | "Escape" | 27 |
| Space | " " | "Space" | 32 |
| Tab | "Tab" | "Tab" | 9 |
| Backspace | "Backspace" | "Backspace" | 8 |
| Delete | "Delete" | "Delete" | 46 |
| ArrowUp | "ArrowUp" | "ArrowUp" | 38 |
| ArrowDown | "ArrowDown" | "ArrowDown" | 40 |
| ArrowLeft | "ArrowLeft" | "ArrowLeft" | 37 |
| ArrowRight | "ArrowRight" | "ArrowRight" | 39 |
| a | "a" | "KeyA" | 65 |
| 1 | "1" | "Digit1" | 49 |
How to Use Keyboard Event Tester
- 1Click the keyboard area to focus it.
- 2Press any key or key combination to see its event properties.
- 3View keyCode, key, code, charCode, and modifier states in real time.
Zenovay
Track your website performance
Real-time analytics, session replay, heatmaps, and AI insights. 2-minute setup, privacy-first.
Related Tools
JSON Formatter & ValidatorFormat, validate, and beautify JSON data with syntax highlighting and error detection.
JWT DecoderDecode and inspect JWT tokens. View header, payload, and verify signatures.
Base64 Encode/DecodeEncode text to Base64 or decode Base64 back to text. Supports UTF-8 and binary data.
URL Encode/DecodeEncode or decode URL components. Handle special characters, query strings, and full URLs.
Frequently Asked Questions
What is the difference between event.key, event.code, and event.keyCode?▾
event.key: the logical key value — what the key produces based on keyboard layout and modifiers. "a" with no modifiers, "A" with Shift, "Enter", "ArrowLeft". Locale-aware. event.code: the physical key location on the keyboard, layout-independent. "KeyA", "Enter", "ArrowLeft", "Digit1". Same code regardless of whether Shift is held. event.keyCode (deprecated): a numeric code. Varies by browser and OS. Use event.key or event.code instead. Best practice: use event.key for character input, event.code for position-based shortcuts (like WASD in games).
How do I detect modifier keys (Ctrl, Alt, Shift, Meta)?▾
Check boolean properties on the event: event.ctrlKey, event.shiftKey, event.altKey, event.metaKey (⌘ on Mac, ⊞ on Windows). Example: if (event.ctrlKey && event.key === "s") saveDraft(). The modifier keys themselves fire keydown events with key values "Control", "Shift", "Alt", "Meta". For cross-platform shortcuts: use ctrlKey for Ctrl on Windows/Linux but metaKey for ⌘ on Mac: const isModKey = event.ctrlKey || event.metaKey. KeyboardEvent.getModifierState("CapsLock") checks persistent modifier states.
What is the difference between keydown, keypress, and keyup?▾
keydown: fires when the key is first pressed. Fires repeatedly if held. Works for all keys including Ctrl, Shift, arrow keys. Best for: shortcuts, game controls, preventing default. keypress (deprecated): fires for character-producing keys only. Does not fire for arrow keys, backspace, etc. Deprecated in favor of keydown + event.key. keyup: fires when key is released. Only fires once per key press. Best for: detecting when a key was pressed without repeating. Input events (input, change): better for text input tracking than keyboard events.
How do I prevent default browser keyboard shortcuts?▾
Call event.preventDefault() in the keydown handler. Example: document.addEventListener("keydown", (e) => { if (e.ctrlKey && e.key === "s") { e.preventDefault(); save(); } }). Limitations: some OS-level shortcuts (Ctrl+Alt+Delete, Win key, mission control) cannot be prevented. Browser shortcuts vary by browser. In iframes, some shortcuts may be intercepted by the parent. React synthetic events: event.nativeEvent.preventDefault() or event.preventDefault() both work. Note: event.stopPropagation() prevents the event from bubbling, but doesn't prevent browser default behavior.
How do I handle keyboard events in React?▾
React uses synthetic events: onKeyDown, onKeyUp, onKeyPress (deprecated). Example: <input onKeyDown={(e) => { if (e.key === "Enter") submit(); if (e.key === "Escape") cancel(); }}. For global shortcuts: use useEffect to add/remove native event listeners. Always remove listeners in cleanup: useEffect(() => { const handler = (e) => {...}; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, []). For complex shortcut systems, use libraries like react-hotkeys-hook or tinykeys.