Key Event Inspector: Understanding KeyboardEvent Properties for Robust Shortcuts
Use event.code for shortcuts and event.key for text input to handle different keyboard layouts.
Update your shortcut handlers to use event.code and check event.isComposing to avoid triggering during IME composition.
Summary
The key‑event‑viz tool visualises every field of a KeyboardEvent, showing event.key, event.code, keyCode, isComposing, modifier state, and location, and demonstrates why event.key and event.code both exist. event.key represents the character produced and depends on layout and modifier state, while event.code is the physical key and is layout‑stable, making it ideal for shortcuts. The isComposing flag (or legacy keyCode 229) indicates that an IME is composing text, preventing shortcut handlers from firing mid‑composition. getModifierState allows detection of CapsLock, NumLock, AltGraph, and other lock states that boolean flags miss. event.location distinguishes left/right modifier keys and numpad keys, useful for key remappers. The tool shows that event.code should be used for shortcuts, event.key for text input, and that checking event.isComposing ensures robust shortcut handling across layouts and IMEs.
Key changes
- event.key represents the character produced, while event.code represents the physical key independent of layout.
- event.isComposing flag (or legacy keyCode 229) indicates IME composition, preventing shortcut triggers during typing.
- getModifierState allows detection of CapsLock, NumLock, AltGraph, and other lock states not exposed by boolean flags.
- event.location distinguishes left/right modifier keys and numpad keys, useful for key remappers.
- The tool demonstrates that event.code should be used for shortcuts, event.key for text input.
- Using event.code and checking event.isComposing ensures robust shortcut handling across layouts and IMEs.