Build accessible keyboard navigation. Press any key to instantly view its legacy keyCode integer, modern event.key string, and physical hardware event.code.
Stop `console.log()`ing your event listeners. Instantly visualize the hidden DOM data triggered by your hardware.
The engine actively detects boolean modifier states. It will explicitly show you if the user was holding down `Shift`, `Ctrl`, `Alt`, or `Meta` (Command) when the primary key was struck.
Are you building a game? The tool distinguishes between the `Enter` key on the main keyboard array versus the `Enter` key located on the numeric keypad (Numpad).
Watch the event lifecycle in real-time. The dashboard tracks the sequential firing of `keydown`, `keypress`, and `keyup` DOM events to help you time your frontend animations perfectly.
Handling keyboard input correctly is the cornerstone of web accessibility (a11y) and power-user workflows. When a user presses a key on their physical keyboard, the browser generates a KeyboardEvent object containing dozens of properties. Understanding which property to read is critical for bug-free development.
For the first 15 years of web development, engineers universally relied on event.keyCode. If you wanted to detect when the user pressed the Enter key, you wrote: if (event.keyCode === 13).
However, this integer-based system was fundamentally broken. The integer '13' wasn't standard across different operating systems (Windows vs Mac) or different international layouts (QWERTY vs AZERTY). It caused massive bugs where a specific keyboard action on a French Mac would trigger the wrong functionality.
The W3C (World Wide Web Consortium) officially deprecated keyCode. While browsers still support it for legacy websites, modern applications should NEVER use it. You should use an online keycode inspector to find the modern string replacements.
To replace the integer system, the W3C introduced two distinct string-based properties. Knowing the difference is vital.
1. event.key: This represents the "logical" value. If you press the 'A' key, event.key is 'a'. If you hold down Shift and press 'A', the value becomes 'A'. Use this when you care about the actual text the user is trying to type into an input field.
2. event.code: This represents the "physical" hardware button. Regardless of whether Shift or Caps Lock is engaged, pressing the 'A' key will always return 'KeyA'. Use this when you are building WASD movement controls for a browser game, where the physical location of the button on the desk matters more than the letter it types.
If you are building custom UI components (like a Dropdown menu or a Modal), you must manually wire up keyboard events to comply with ADA (Americans with Disabilities Act) accessibility standards.
event.key === 'Escape') must immediately close it.<div> instead of a native <button>, it will not trigger when pressed with a keyboard. You must manually listen for event.key === ' ' or event.key === 'Enter' to execute the click functionality.