Keycode Info

Report an Issue

Help us improve by telling us what went wrong.

Embed this Tool

Customize and copy the embed code for your website.

Decode Every Keyboard Event with the Keycode Info Tool

If you have ever written a JavaScript event handler for keyboard input, you know the pain. Is it event.key, event.code, event.keyCode, or event.which? Which property gives you the physical key versus the character produced? What value does the Enter key return on different operating systems? Our Keycode Info tool answers all of these questions in real time. Press any key on your keyboard and instantly see every property the browser reports, neatly organised and explained.

Why Keyboard Event Properties Are So Confusing

The Web API for keyboard events has evolved through three decades of browser history, and backwards compatibility has left us with overlapping, sometimes contradictory properties. The deprecated keyCode property returns a numeric code that varies between browsers for certain keys. The newer key property returns a human-readable string like "Enter" or "a", but its value changes depending on whether Shift or CapsLock is active. The code property identifies the physical key regardless of layout, so pressing the key in the QWERTY "Q" position always returns "KeyQ" even on a Dvorak or AZERTY keyboard.

Understanding the distinction between these properties is critical for building accessible, internationalised web applications. A keyboard shortcut bound to keyCode 65 works fine on an English layout but fires on the wrong key when a French user presses "Q" (which is where "A" sits on AZERTY). Binding to event.code instead gives you layout-independent behaviour. This tool makes those differences visible and tangible.

What the Tool Shows You

Press any key and the display updates instantly with the following information: the event.key string, the event.code identifier, the legacy event.keyCode number, the event.which value, and the state of all modifier keys (Shift, Control, Alt, Meta). It also indicates whether the event is a keydown, keyup, or keypress (where supported), and whether the key is a printable character or a control key.

For special keys like function keys, arrow keys, media controls, and international input method composition events, the tool displays additional context explaining how browsers handle these edge cases. This reference data saves you from hunting through MDN documentation or Stack Overflow threads every time you encounter an unfamiliar keycode.

Use Cases Beyond Debugging

Game developers building browser-based games need to know exact key mappings to bind movement, actions, and menu navigation. This tool lets you verify bindings across different keyboards and operating systems. Accessibility specialists use it to confirm that keyboard navigation works correctly for screen reader users, ensuring that focus traps, skip links, and custom widgets respond to the expected keys.

Students learning JavaScript find the visual feedback invaluable. Instead of reading abstract documentation, they press keys and see immediate, concrete results. Teachers can project the tool during lectures to demonstrate keyboard event concepts interactively.

Cross-Browser Quirks Exposed

Some keys behave inconsistently across browsers. The right-side Alt key on European keyboards triggers AltGraph in some browsers and Alt in others. The Windows key and the Mac Command key share event.metaKey but differ in event.code. This tool captures and displays whatever the current browser reports, giving you ground truth for your specific environment.

Everything runs in-browser with no data transmitted anywhere. Bookmark the keycode info tool and keep it one tab away for those inevitable moments when keyboard events refuse to cooperate.