Keyboard Event Tester shows the browser's raw keyboard event data for any key you press. It displays the event type (keydown, keypress, keyup), key name, keyCode, charCode, code, location, and modifier key states (Ctrl, Shift, Alt, Meta). Essential for debugging keyboard handling in web applications — especially for special keys, function keys, and international keyboard layouts.
Modern JavaScript keyboard events provide several properties: key — a human-readable string representing the key's value (e.g., 'ArrowUp', 'a', 'F1'). code — a physical key identifier that's layout-independent (e.g., 'KeyA', 'ArrowUp', 'Digit1') — use this for game controls where you want physical key position. keyCode — deprecated legacy numeric code (still used for compatibility). charCode — deprecated. location — distinguishes left/right modifier keys and numpad keys (1=left, 2=right, 3=numpad).
Keyboard events have three phases: keydown fires when a key is pressed (fires repeatedly on hold). keypress fires for character-producing keys only (deprecated — some browsers don't fire it for non-printable keys). keyup fires when a key is released. For game development and shortcuts: listen on keydown. For text input: use the input event on text fields instead of keyboard events — it handles composition (IME for CJK characters) correctly.
Arrow key codes
Result: ArrowUp → key:'ArrowUp', code:'ArrowUp', keyCode:38
Ctrl+Shift+K combination
Result: Ctrl: ctrlKey:true, Shift: shiftKey:true, K: key:'K', code:'KeyK', keyCode:75
Numpad 5
Result: key:'5', code:'Numpad5', keyCode:101, location:3 (location 3 = numpad)
What is the difference between event.key and event.code?
event.key returns the key's value in the current keyboard layout — 'a' when you press A, 'A' when you press Shift+A, 'Ñ' for the Spanish Ñ key. Layout-dependent. Use for: text input, detecting which character the user typed. event.code returns the physical key position label regardless of layout — 'KeyA' for the A key position, 'Digit1' for the 1 key, 'Numpad0' for numpad 0. Layout-independent. Use for: game controls (WASD movement), shortcuts where you care about position not character. Example: a French AZERTY keyboard has 'A' on event.code:'KeyQ'.
Why is keyCode deprecated and what should I use instead?
keyCode was a non-standard property with browser-inconsistent values for special keys. It's deprecated in the Web standard since 2021. Use instead: event.key for the key's value (character or special key name like 'Enter', 'ArrowUp', 'F1'). event.code for the physical key position ('KeyA', 'Enter', 'ArrowUp'). For character input: listen to the input event on text fields, not keyboard events. For shortcuts: use event.key with modifier flags (event.ctrlKey, event.shiftKey, event.altKey, event.metaKey). Libraries like hotkeys-js abstract this for you.
How do I handle keyboard shortcuts in JavaScript?
document.addEventListener('keydown', e => { if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); openSearch(); } }). Always e.preventDefault() to stop the browser's default action. For complex shortcuts: use a library like Mousetrap, hotkeys-js, or @dnd-kit/keyboard. In React: add the listener in useEffect with cleanup: return () => document.removeEventListener('keydown', handler). Avoid listening on document for shortcuts in focused components — use onKeyDown on the component instead for proper cleanup.
What is IME (Input Method Editor) and how does it affect keyboard events?
IME is the input system for languages that require combining keystrokes to produce characters — Chinese (Pinyin/Wubi), Japanese (Hiragana/Katakana/Kanji), Korean (Hangul). During IME composition: the user types phonetic characters, the IME suggests actual characters, the user selects. During this process, keyboard events fire but the characters aren't committed yet. The compositionstart, compositionupdate, and compositionend events track IME state. For text input: use the input event (fires after composition is complete), not keyboard events. Checking event.isComposing lets you skip keyboard handler logic during composition.
How do I detect specific special keys in JavaScript?
Special key values: Enter='Enter', Escape='Escape', Tab='Tab', Backspace='Backspace', Delete='Delete', ArrowUp/ArrowDown/ArrowLeft/ArrowRight, Home='Home', End='End', PageUp='PageUp', PageDown='PageDown', F1-F12='F1'-'F12', Space=' ' (space character), Shift='Shift', Control='Control', Alt='Alt', Meta='Meta' (Cmd on Mac, Windows key on Windows). Modifier key combinations: check event.shiftKey, event.ctrlKey, event.altKey, event.metaKey booleans. Example: if (e.key === 'Enter' && e.shiftKey) { insertLineBreak(); }.