Keyboard Code Finder

You're wiring up a keyboard shortcut and need to know what `event.key` returns when the user hits the down arrow on a Mac with a numeric keypad. Press the key, see exactly what every relevant property contains: `key`, `code`, `keyCode`, `which`, modifiers, location.

The deprecated properties (`keyCode`, `which`) are still shown because plenty of older code depends on them, and you might be debugging that code rather than writing fresh. New code should rely on `key` and `code` — they're the standardized ones.

Layout-aware: `code` reports the physical key location (KeyA), `key` reports the character produced (which depends on the user's keyboard layout). Pick the right one based on whether your shortcut is positional or character-based.

The browser's keyboard event model exposes several properties that overlap and confuse: `key`, `code`, `keyCode`, `which`, `charCode`. The modern, standardized properties are `key` (the character produced after applying modifiers and layout) and `code` (the physical key location, named like 'KeyA' or 'Digit1' or 'ArrowDown'). Everything else is deprecated but still works in every browser, so you'll encounter legacy code that depends on `keyCode`. The tool surfaces all of them so you can inspect what your handler is actually receiving.

A worked example: you press the right arrow on a Mac. `event.key` is 'ArrowRight'. `event.code` is 'ArrowRight'. `event.keyCode` is 39. `event.which` is also 39. `event.location` is 0 (standard). On Shift+R, `event.key` is 'R' (uppercase), `event.code` is 'KeyR' (the physical key, regardless of shift), `event.keyCode` is 82. The split between `key` and `code` is what lets you write WASD movement that works on Dvorak keyboards — listen on `code === 'KeyW'` and the handler triggers on the same physical key the user is using to type 'comma' on their layout, which is what you want for a movement key.

Where this trips you up: international layouts. A French AZERTY user who presses the key labeled 'A' on their keyboard has `code === 'KeyQ'` and `key === 'a'` — because the physical key in the QWERTY 'Q' position now produces 'a.' If your shortcut listens for 'KeyQ' it'll fire on the AZERTY user's 'A' key, which from their perspective is correct (they pressed the key in that spot) but feels weird. There's no clean answer; pick which interpretation matters and own it.

A note on cross-browser quirks: the meta key (Command on Mac, Windows on Windows) reports as 'Meta' in modern browsers, but older Safari sometimes reports 'OS' instead. The Numpad keys all have distinct `code` values like 'Numpad1' separate from 'Digit1' — useful when you want NumLock-aware shortcuts. The context menu key is 'ContextMenu' on most browsers but missing on macOS keyboards entirely. If your shortcut needs to be cross-platform, test on each because the standardization is incomplete.