JavaScript Keycode Info
Focus the capture box, press a key, read every KeyboardEvent property. Local only.
| event.key | - |
|---|---|
| event.code | - |
| event.keyCode (legacy / deprecated) | - |
| event.which (legacy) | - |
| event.location | - |
| modifiers | - |
Common key reference
| Key pressed | event.key | event.code |
|---|---|---|
| Enter | Enter | Enter |
| Escape | Escape | Escape |
| Tab | Tab | Tab |
| Space | " " (space) | Space |
| Up arrow | ArrowUp | ArrowUp |
| Down arrow | ArrowDown | ArrowDown |
| Left arrow | ArrowLeft | ArrowLeft |
| Right arrow | ArrowRight | ArrowRight |
| Backspace | Backspace | Backspace |
| Delete | Delete | Delete |
| Letter a | a (A with Shift) | KeyA |
| Letter z | z (Z with Shift) | KeyZ |
| Digit 0 | 0 | Digit0 |
| Digit 9 | 9 | Digit9 |
What this tool does
This is a live JavaScript key event tester. Focus the capture box and press any key,
and the readout shows every property the browser attaches to that KeyboardEvent:
event.key (the value the key produces), event.code (the
physical key position), the legacy event.keyCode and
event.which numbers, plus the modifier flags (ctrlKey,
altKey, shiftKey, metaKey), the
repeat flag, and location. It is the fastest way to look up
the right "javascript keycode" without console logging by hand.
How to use it
Click the dashed capture box so it has keyboard focus, then press a key. For example,
press a and the readout shows event.key as
a and event.code as KeyA; hold Shift and it
becomes A while the code stays KeyA. The box calls
preventDefault() so keys like Tab and Space report their values instead
of moving focus or scrolling the page. When you are done, click anywhere outside the
box or press the Reset button to release the capture and restore
normal keyboard behavior.
Common use cases
- Looking up the exact
event.keyorevent.codestring to compare against in a keyboard handler. - Wiring up game controls (for example WASD movement) that must key off physical position rather than the typed character.
- Debugging why a keyboard shortcut fails on a different layout, operating system, or browser.
- Confirming which modifier flags fire for a chord like Ctrl+Shift+K before you code the condition.
- Teaching or documenting the difference between the modern and legacy keyboard properties.
Common pitfalls
- event.keyCode is deprecated. The numeric
keyCodeand its twinwhichwere never consistent across browsers, layouts, and operating systems, so the UI Events specification deprecated them. They still work for backward compatibility, but new code should compare againstevent.keyorevent.codeinstead, which have stable, well-defined values. - key and code are not interchangeable.
event.keychanges with layout and modifiers (Shift turnsaintoA), whileevent.codeis fixed to the physical key. Pickkeyfor "what character did the user type" andcodefor "which physical key did the user press." - Some keys never reach your handler. The operating system or
browser can swallow media keys, certain function keys, and reserved shortcuts
before the page sees a keydown. During IME composition you may also see
event.keyofProcessor akeyCodeof 229. - Do not leave preventDefault on globally. This tool only blocks
default behavior while its capture box is focused. If you copy the pattern, scope
preventDefault()to a specific element so the rest of the page stays keyboard operable.
Frequently asked questions
- What is a JavaScript keycode?
- Historically, "keycode" referred to event.keyCode, a numeric identifier for the physical key pressed during a keydown or keyup event. Today the term is used loosely to mean any of the values a KeyboardEvent exposes: event.key (the character or named value produced), event.code (the physical key position), and the legacy event.keyCode and event.which numbers. This tool shows all of them at once so you can pick the right property for your use case.
- What is the difference between event.key and event.code?
- event.key is the logical value the key produces given the current layout and modifiers. Pressing the A key gives "a", or "A" with Shift held. event.code is the physical position on the keyboard, independent of layout, so the same physical key always reports "KeyA" whether the user runs QWERTY, AZERTY, or Dvorak. Use event.key when you care about the character typed, and event.code when you care about the physical key, such as WASD movement in a game.
- Why is event.keyCode deprecated?
- event.keyCode (and its sibling event.which) return an inconsistent number whose meaning varied across browsers, operating systems, and keyboard layouts, especially for punctuation and non-Latin scripts. The UI Events specification deprecated keyCode, charCode, and which in favor of event.key and event.code, which have well-defined, cross-browser values. keyCode still works in current browsers for backward compatibility, but new code should not rely on it.
- Why do some keys not fire a keydown event?
- Some keys are intercepted by the operating system or browser before your page sees them. Examples include certain function keys, media keys, and OS-level shortcuts. Additionally, the browser may reserve combinations such as Ctrl+W or Cmd+Q. Keys handled entirely by the input method editor (IME) during composition may report event.key as "Process" or a key value of 229 in keyCode instead of the final character.
- How do I detect modifier keys like Ctrl, Shift, Alt, and Cmd?
- Read the boolean flags on the event: event.ctrlKey, event.shiftKey, event.altKey, and event.metaKey (Cmd on macOS, Windows key on Windows). These are true while the corresponding modifier is held during the event. The tool also shows event.repeat, which is true when a key is auto-repeating from being held down, and event.location, which distinguishes left from right modifier keys and the numeric keypad.
- Does this key event tester send my keystrokes anywhere?
- No. Every keystroke is read from the KeyboardEvent and rendered on this page with client-side JavaScript. Nothing is transmitted, logged, or stored. You can confirm this by opening DevTools and watching the Network tab while you type: there are zero requests.
Cite this tool
For academic, journalistic, or technical references. Pick a format:
Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.