Keycode Info
Inspect the key, code, keyCode and modifier state of any keyboard input.
Press any key and see exactly what your code will receive in a JavaScript keyboard event: the layout-aware key, the layout-independent code, the legacy keyCode, and the modifier flags. Essential when building cross-keyboard shortcuts that work on QWERTY, AZERTY and Dvorak alike.
Common use cases: building keyboard shortcuts that don't break on non-US layouts, debugging why a hotkey fires for the wrong character, learning the codes for function keys and special characters, and verifying what your keyboard sends for unusual keys like AltGr, dead keys, and the Korean Hanja key.
Frequently asked questions
What's the difference between event.key, event.code and event.keyCode?
event.code identifies the physical key (e.g. KeyA is the A key no matter the layout). event.key is the character it produces given the current layout and modifiers (e.g. A with shift, а on a Russian layout). event.keyCode is the deprecated legacy number — avoid for new code.Which should I use for keyboard shortcuts?
Use
event.code for shortcuts that depend on key position (WASD in a game, vim-style hjkl). Use event.key for shortcuts that depend on the produced character (Ctrl+S regardless of layout). Mixing them is the usual cause of "my shortcut doesn't work on an AZERTY keyboard" bug reports.How are modifier keys reported?
Modifiers (
Shift, Control, Alt, Meta) are themselves key events, and they appear as boolean flags on subsequent events: event.shiftKey, event.ctrlKey, event.altKey, event.metaKey. Meta is Cmd on Mac and the Windows key on PC.Why doesn't the keyup event fire on macOS sometimes?
A long-standing macOS quirk: when the Cmd key is held,
keyup for other keys may not fire reliably. If you need precise key tracking with Cmd, listen for the Cmd key's own keyup and treat any "stuck" keys as released at that point.