Tools
Keycode Info
The keycode info tool captures keyboard events in the browser and displays the full set of properties for each key press, including the deprecated keyCode, the modern key and code values, and modifier state. It is indispensable when building keyboard shortcuts, game controls, or accessibility features and you need to know the exact values fired by a specific key on the current operating system and keyboard layout.
What is the Keycode Info Tool?
The keycode info tool is an interactive keyboard event inspector for developers. When you press a key, it intercepts the keydown, keypress, and keyup events and displays all relevant properties: the legacy keyCode and charCode integers, the modern key string (e.g., 'ArrowLeft'), the physical code string (e.g., 'KeyA'), and the state of modifier keys (Shift, Ctrl, Alt, Meta). This helps developers correctly implement cross-browser keyboard handling without guessing values.
How does it work?
The tool attaches event listeners to the document for keydown, keypress, and keyup events. When a key is pressed, it reads all properties of the KeyboardEvent object and displays them in a structured table. The key property reflects the logical key value accounting for the current keyboard layout, while the code property reflects the physical key location regardless of layout. Both are needed for robust keyboard shortcut implementations.
Typical Use Cases
- Determining the correct key and code values for a custom keyboard shortcut
- Debugging keyboard event handling in a web application
- Identifying differences in key values between operating systems or keyboard layouts
- Building game controls that need to detect specific physical key positions
Step-by-step Guide
- Step 1: Click inside the key capture area to give it focus.
- Step 2: Press any key on your keyboard.
- Step 3: Read the displayed key, code, keyCode, and modifier values.
- Step 4: Copy the relevant values into your event handler code.
Example
Input
Press the Enter key
Output
key: 'Enter', code: 'Enter', keyCode: 13, charCode: 0
Tips & Notes
- Prefer the code property for physical position-based shortcuts (e.g., WASD in games) so they work on non-QWERTY layouts.
- Prefer the key property for semantic shortcuts (e.g., 'ArrowLeft') that should follow the logical keyboard layout.
- The keyCode property is deprecated in modern browsers — use key or code in new code.
Frequently Asked Questions
What is the difference between key and code?
key gives the logical value of the key (what character or action it produces, e.g., 'a' or 'Enter'). code gives the physical identifier of the key position (e.g., 'KeyA' or 'Enter'), regardless of keyboard layout or language.
Why do some keys show different keyCode values on Mac and Windows?
The keyCode value was never fully standardized and its mapping varied by browser and OS. This is one reason the modern key and code properties were introduced — they are standardized by the W3C UI Events specification.
Keycode Info
Display the JavaScript keyCode, code, location, and modifier keys for any pressed key.
Open Tool