Event Keycode Finder
Note: A single-character shortcut with no modifier collides with screen reader commands, and WCAG 2.1.4 requires that such shortcuts can be remapped or switched off. Requiring a modifier avoids most of the conflict.
event.key is the character produced, after the layout and any modifiers are applied. Pressing the same physical key gives "a" on a QWERTY layout and "q" on AZERTY, and gives "A" when shift is held. Use it when you care what the user typed — a character, Enter, Escape, an arrow.
event.code is the physical key, independent of layout. That same key is KeyA on every keyboard in the world regardless of what it prints. Use it for anything positional: WASD movement, a key chosen because of where the finger goes rather than what the letter is.
event.keyCode is deprecated, has been for years, and is inconsistent between browsers for anything beyond the alphanumerics. It is shown here because a great deal of existing code still uses it and you will meet it, not because you should write it.
The practical rule: a keyboard shortcut a user has to remember by name — Escape, Enter, Ctrl+S — belongs to event.key. A shortcut chosen for its position under the hand belongs to event.code. Using code for a named shortcut is how a Dvorak or AZERTY user ends up with your save shortcut on a completely different letter.
One accessibility note: any keyboard shortcut you add can collide with an assistive technology's own bindings. Single-character shortcuts without a modifier are the worst offenders, and WCAG 2.1.4 asks that they be remappable or switchable off.
Frequently Asked Questions
Should I use event.key or event.code?
key when you care what character was produced — Escape, Enter, a letter the user typed. code when you care where the key physically is, like WASD movement. Using code for a named shortcut puts it on the wrong letter for anyone not on a QWERTY layout.
Why is keyCode deprecated?
Because it conflated physical position with produced character and was never consistent between browsers beyond the basic alphanumerics. It still works, which is why so much code uses it, but anything written now should use key or code.
Why does my shortcut not fire with a modifier held?
Because the modifier changes event.key. Ctrl+S produces key "s", but adding shift makes it "S", and on some layouts Alt changes it entirely. Check the modifier flags separately — event.ctrlKey and the rest — and compare a lowercased key, or use event.code.
How do I detect Cmd on Mac and Ctrl on Windows together?
Check event.metaKey || event.ctrlKey, which covers both without sniffing the platform. Testing navigator.platform is unreliable and increasingly deprecated across browsers.
Are custom keyboard shortcuts an accessibility problem?
They can be. Single-character shortcuts with no modifier collide with screen reader commands, and WCAG 2.1.4 requires that such shortcuts can be turned off or remapped. Requiring a modifier avoids most of the conflict.
