Keycode info

Building keyboard shortcuts, games or accessible widgets requires knowing exactly what the browser reports when a key is pressed. This tool displays the properties of the keydown event for any key you press, including modifiers, so you can choose the right property for your code.

How to use it

Click on the page and press a key or combination. The tool shows the event's properties immediately.

The properties explained

• event.key: the character or named key produced, respecting the keyboard layout and Shift. Pressing A gives 'a', Shift+A gives 'A', Enter gives 'Enter'.
• event.code: the physical key position, independent of layout: 'KeyA', 'Digit1', 'Enter', 'ShiftLeft'.
• event.keyCode / which: legacy numeric codes, such as 13 for Enter and 65 for A. Deprecated, but still found in older code.
• event.location: 0 standard, 1 left, 2 right, 3 numpad.
• Modifiers: ctrlKey, shiftKey, altKey, metaKey (Command on Mac, Windows key on PC).

key or code?

On a French AZERTY keyboard, the physical key in the QWERTY Q position reports key = 'a' but code = 'KeyQ'.

• Use key for text-related shortcuts, such as Ctrl+S or ?, so they follow the user's layout.
• Use code for position-based controls, such as WASD movement in games, so they work the same on every layout.

Tips

• Check event.isComposing to ignore keys pressed while typing with an input method editor, for Chinese or Japanese input.
• Use metaKey on macOS and ctrlKey elsewhere for familiar shortcuts.
• Some combinations are reserved by the browser or OS and never reach the page.