Handy helper tool by Wes Bos: simply press any key and see the results for KeyboardEvent.which
, KeyboardEvent.key
,KeyboardEvent.code
, etc.
As a user with an AZERTY
keyboard layout I often have a broken experience on sites that respond to first row of keys, e.g. QWERTY
. As those sites respond to KeyboardEvent.key
— which differs from layout to layout — I cannot simply use the first row, but have to reach for the Q
and W
keys on the second and third row.
To properly implement key presses independent of the keyboard layout, it’s recommended to use e.keyCode
as that will yield the same keyCode
. As per MDN:
The
KeyboardEvent.code
property represents a physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value that isn’t altered by keyboard layout or the state of the modifier keys.
For example: pressing A
on AZERTY
will yield KeyQ
. Pressing Q
on QWERTY
will also yield KeyQ
as they’re the same physical key.