JavaScript Keycode Viewer

How to use JavaScript Keycode Viewer

1. •Click anywhere in the tool area to make sure it has focus.
2. •Press any key on your keyboard — a letter, number, modifier, function key, arrow key, or any special key.
3. •View the full event details displayed instantly: event.key, event.code, event.keyCode (deprecated), event.which (deprecated), and modifier states (shiftKey, ctrlKey, altKey, metaKey).
4. •Use the displayed values in your JavaScript event handlers by copying the exact event.key or event.code string you need.

What are JavaScript key events?

When a user presses a key, the browser fires a sequence of keyboard events: keydown (key is pressed), keypress (deprecated, character keys only), and keyup (key is released). Each event carries properties that identify which key was pressed and what modifier keys were held down.

The modern way to identify keys uses two properties. event.key returns the logical value of the key: "a", "Enter", "ArrowUp", "Shift", etc. It is layout-dependent, meaning the same physical key produces different key values on QWERTY vs. AZERTY keyboards. event.code returns the physical key position: "KeyA", "Enter", "ArrowUp", "ShiftLeft", etc. It is layout-independent — "KeyA" always means the key in the A position on a QWERTY layout, even if the user's layout maps that key to a different character.

The older event.keyCode and event.which properties return numeric codes and are officially deprecated. They remain in browsers for backward compatibility, but new code should use event.key or event.code. The numeric codes were inconsistent across browsers and locales, which is why the string-based properties were introduced.

Understanding the difference between key and code is essential for building keyboard shortcuts. For a gaming application where WASD controls movement, use event.code so the controls work regardless of keyboard layout. For text input or shortcuts like Ctrl+C, use event.key to match the logical character.

Common use cases

• •Building keyboard shortcuts: Look up the exact event.key value for a key combination to use in your addEventListener("keydown", ...) handler.
• •Game input handling: Determine the correct event.code values for movement keys (WASD, arrows) that must work across keyboard layouts.
• •Debugging key events: When a keyboard shortcut does not work as expected, use this tool to verify exactly what values your browser reports for that key.
• •Accessibility development: Test that all interactive elements can be reached and activated via keyboard, including less common keys like Escape, Tab, and Space.

FAQ

Q: Why does keyCode return different values in different browsers? A: The keyCode property was never formally standardized and browsers implemented it differently. This is exactly why event.key and event.code were introduced — use those instead.

Q: What is the difference between key and code? A: key gives you the character produced by the key press (layout-dependent). code gives you the physical key location (layout-independent). On a French AZERTY keyboard, pressing the A position gives key: "q" but code: "KeyA".

Q: Do function keys (F1-F12) work? A: Yes, but some function keys may be intercepted by the operating system or browser before your page receives them. F5 (refresh) and F11 (fullscreen) are common examples.

Is my data safe?

Yes. This tool runs entirely in your browser. Your data is never sent to our servers.