Key Codes Tools
Key code tooling: distinguishes keyCode, which and code, explains keydown versus keypress timing, modifier combination order, and when to choose event.key versus event.code under IME and non-Latin layouts.
Keyboard events expose three different value systems, and mixing them breaks shortcuts across layouts.
Approach Comparison
| Aspect | event.key | event.code |
|---|---|---|
| Meaning | The key pressed (semantic) | The physical position pressed |
| Affected by layout | Yes | No |
| Affected by IME | Yes | No |
| Example (Ctrl+Z) | Varies with language | Always "KeyZ" |
| Best for | Display and text handling | Shortcuts, games, forms |
| Dead keys and combining marks | May misbehave | Stable |
| Number row vs numpad | Indistinguishable | Distinguishable (Numpad1 vs Digit1) |
| Browser support | All modern browsers | All modern browsers |
Edge Cases
- During IME composition (isComposing true) keydown does not fire per character — this is by design, not a bug.
- event.key depends on the OS keyboard layout, so one physical key returns different characters across languages.
- The numpad cannot be distinguished under key, but code can (Numpad1 versus Digit1).
- event.keyCode and which are deprecated and should not appear in new code.
Common Pitfalls
- Using key for shortcuts, which then fail on non-English layouts such as German or French.
- Reading input content inside keydown, which always yields the previous value.
- Intercepting keydown per character during IME composition, breaking candidate window output.
- Comparing against the deprecated keyCode, which future browsers may drop.
Related Tools
- Keycode InfoShow the key code and event details for every keypress (keyCode, key, code, location) and copy the values you need for shortcuts, games and other controls.
- Text StatisticsCount characters, words, lines, bytes and estimate reading time with sentence analysis to gauge content length and overall readability at a single glance.
- Text DiffCompare two text blocks line-by-line using the LCS algorithm with inline highlighting to review edits and merge conflicting changes side by side in one view.
- Hash GeneratorGenerate SHA-1/256/384/512 hashes from text with hex output, plus MD5 and RIPEMD-160. Switch between hex and Base64 output, then compare against a published.