Click the capture field and press keys. For every keydown you see event.key, event.code, the deprecated keyCode and which, the location (left, right or numpad), the modifier keys, whether the key is auto-repeating, whether an input method is composing, and Caps Lock. A history table logs keydown, keyup, keypress, composition and beforeinput events in order, and the tool writes a ready-to-paste JavaScript handler for the combination you pressed, matching either the character or the physical key. A second tab inspects mouse, wheel, touch and pointer events in a test area: buttons, coordinates, pointer type, pressure, pen tilt and wheel deltas.
key, code and keyCode in one minute
- `event.key` is what the key produces with the current layout and modifiers:
"a", "A", "?", "Enter", "ArrowLeft", or "Dead" for an accent key waiting for the next letter. - `event.code` names the physical key as if the keyboard were US QWERTY:
"KeyA", "Digit1", "Slash", "ShiftRight". On a French AZERTY keyboard, the key in the Q position reports code "KeyQ" and key "a". - `keyCode` and `which` are legacy numbers marked deprecated in the UI Events specification. Browsers still send them, but their values for punctuation differ between browsers and layouts, and during IME composition
keyCode is 229. Use key or code in new code.
Which to use: match `key` for shortcuts named after what they type (Ctrl+Z for undo, "?" for help), so they work on every layout. Match `code` when the position matters more than the label, such as WASD in a game or a shortcut that should stay next to another one. The generated handler ignores auto-repeat and IME composition, and can treat Ctrl and Cmd as one "primary" modifier so the same shortcut works on Windows and macOS.
Typing with an IME
Vietnamese Telex, Chinese pinyin or Japanese kana input go through an input method editor. While it composes, browsers fire compositionstart, compositionupdate and compositionend with the text being built, and keydown events with isComposing set to true (often key "Process" and keyCode 229). A shortcut handler must ignore those, or pressing Enter to confirm a word also submits the form. Turn blocking off and type in the field to watch the sequence.
Not trapping the keyboard
Blocking browser shortcuts is what makes Ctrl+S or the space bar show up here instead of saving the page or scrolling it, but it only applies while the capture field has focus, it can be switched off, and Tab and Shift+Tab are never blocked, so you can always move on with the keyboard. Nothing is blocked while an input method is composing. Some combinations never reach a web page at all: the operating system takes Cmd+Tab, Alt+Tab, Ctrl+Alt+Delete and often Cmd+Q or Ctrl+W.
Mouse, wheel and pointer events
In the pointer tab, button says which button changed (0 primary, 1 middle, 2 secondary, 3 back, 4 forward) while buttons is a bitmask of all buttons held (1, 2 secondary, 4 middle, 8, 16). Pointer events add pointerType (mouse, pen or touch), pressure and pen tilt; wheel events report deltas in pixels, lines or pages (deltaMode), which is why trackpads and mouse wheels scroll differently. The article event.key vs event.code vs keyCode covers shortcuts and international layouts in depth. For timing input, see the stopwatch; for character details of what a key types, the Unicode lookup.
