Key Codes

What it's for

See exactly what a browser reports when a key is pressed, to write a keyboard shortcut or debug one that doesn’t fire.

For example, when a shortcut works on your keyboard but not on a colleague’s French one, press the key on each to see that event.key changes with the layout while event.code names the physical key and stays the same.

How to use it

Click the box (or move to it with Tab) and press a key. The table shows:

• event.key: the character or key name the press produces, taking Shift and the keyboard layout into account ("a", "A", "Enter", "ArrowUp"). Use this for most shortcuts.
• event.code: the physical key, whatever the layout ("KeyA", "Digit1", "ShiftLeft"). Use this for game controls, where position matters.
• keyCode and which: the old numbers, still seen in older code. Avoid them in new code.
• location: whether it was the left or right Shift, Control, Alt or Meta, or a key on the numeric keypad.
• The modifiers held, whether the key is repeating because it’s held down, a line of code to test for it, and the shortcut written out.

Tab moves on as usual unless Catch Tab too is ticked; then press Escape (or click elsewhere) to leave the box. The setting is remembered in the browser.

Example

Click the box and press Shift and 2 on a UK keyboard. event.key is "\"", event.code is "Digit2", keyCode is 50, and the modifier held is Shift. On a US keyboard the same keys give "@", with the same code.

Good to know

The browser and system keep some shortcuts for themselves (such as ⌘W, ⌘Q, Ctrl+Alt+Delete and some function keys), so the page never sees them. Keys pressed while composing text in an input method show as "Process" with keyCode 229. Nothing you press is sent anywhere or stored.