key-event-viz
Press any key (or combination) and watch every field of the
KeyboardEvent light up. Built to answer the
"e.key or e.code?" question
most JS shortcut code gets wrong.
code (layout-safe), arrows / Esc use
key.
| type | — |
|---|---|
| key | — |
| code | — |
| keyCode deprecated | — |
| which deprecated | — |
| location | — |
| repeat | — |
| isComposing | — |
Recent events
| type | key | code | keyCode | modifiers | binding |
|---|
Why two fields?
event.key is the character produced:
on a US-QWERTY layout the physical S key produces
"s"; on Dvorak the same physical key produces
"o".
event.code is the physical key:
always "KeyS", regardless of layout.
Rule of thumb: shortcut bindings should use
code so they survive a layout switch. Text input
handlers should use key so they reflect what the
user actually typed.
keyCode and which are
deprecated but still emitted by every browser.
Don't write new code against them.