Press a key and read every property of the resulting KeyboardEvent: key, code, keyCode, which, location and the ctrl, shift, alt and meta flags, plus copyable JSON.
Press a key. See exactly what the browser reports. Click the capture area below and press any key or combination. Every property of the KeyboardEvent is shown side by side, so you can pick the right one for your shortcut handler instead of guessing.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
Modifiers held
none
key, code and keyCode are not the same thing
Three properties, three different questions
A KeyboardEvent exposes several ways to identify a key, and they answer genuinely different questions. event.key is the character or named value produced by the keypress after the layout and modifiers have been applied. Pressing the physical A key gives a, or A with shift held, or a different letter entirely on a Dvorak or AZERTY layout. Named keys arrive as descriptive strings such as Enter, Escape, ArrowLeft and F5.
event.code identifies the physical key position instead, using a layout-independent name drawn from a notional US keyboard. The key in the position of A is always KeyA, whatever the user's layout produces. Digits along the top row are Digit1 through Digit0, and the numeric keypad reports Numpad1 and friends so you can tell the two rows of digits apart.
event.keyCode and its twin event.which are the legacy numeric identifiers. Both are formally deprecated, both are still implemented everywhere, and both are inconsistent across browsers for punctuation. They are worth reading when you maintain older code, but new shortcut handling should use key or code.
Choosing between key and code
The rule of thumb is simple: use code when position matters and key when meaning matters. A game that binds movement to WASD wants code, because the physical cluster under the player's left hand should stay in the same place on an AZERTY keyboard even though it produces ZQSD. A text editor that binds "save" to Ctrl+S wants key, because the user thinks in terms of the letter S rather than the key next to A.
Modifier flags are separate booleans: ctrlKey, shiftKey, altKey and metaKey. Test them explicitly rather than inferring them from key, and remember that the primary shortcut modifier is Command on macOS and Control elsewhere. A common pattern is to accept event.metaKey || event.ctrlKey so one handler covers both platforms.
event.location disambiguates duplicated keys. It is 0 for a standard key, 1 for the left-hand member of a pair such as the left Shift, 2 for the right-hand one, and 3 for a key on the numeric keypad.
Practical gotchas
Not every key generates the events you expect. The browser reserves some combinations for itself - Ctrl+W, Ctrl+T and Command+Q typically close tabs or quit the application before a page ever sees them, and preventDefault cannot reclaim them. Test any shortcut in a real browser window rather than assuming it will reach your handler.
Holding a key produces a stream of repeat events with event.repeat set to true after the first one. Ignore repeats when the shortcut should fire once, and honour them when the behaviour is continuous, such as scrolling or moving a cursor.
Finally, keydown and keyup describe keys, while keypress described characters and has been removed from the standard. For text input, prefer listening to the input event or reading beforeinput, which handle composition, autocomplete and mobile keyboards far more reliably than any key-level event can.
FAQ
Should I use key or code for a keyboard shortcut?
Use `code` when the physical position matters, such as WASD movement in a game. Use `key` when the meaning matters, such as Ctrl+S for save, so the shortcut follows the user's own layout.
Why is keyCode deprecated but still working?
It predates layout-aware events and returns inconsistent numbers for punctuation across browsers. Every engine still implements it for compatibility, but the specification directs new code to `key` and `code`.
Nothing happens when I press Ctrl+W or Command+Q.
Those combinations are claimed by the browser or the operating system and are handled before the page receives them. There is no reliable way to intercept them from a normal web page.
How do I write one shortcut that works on macOS and Windows?
Accept either primary modifier by testing `event.metaKey || event.ctrlKey`. That maps to Command on macOS and Control on Windows and Linux without branching on the user agent.
What does location 3 mean?
The key is on the numeric keypad. Location 1 and 2 mean the left and right member of a duplicated pair such as Shift or Control, and 0 means an ordinary key with no duplicate.
Can I use this to build a text input handler?
It is better to listen for the `input` event. Key events miss composition from IME keyboards, autocomplete and many mobile virtual keyboards, all of which `input` reports correctly.