JavaScript Key Code Event Viewer
Interactive diagnostic tool for developers to capture real-time keyboard events, visualize key codes, generate JS snippets, and debug input logic.
| Time | Key | Code | Which | Loc |
|---|
About
This Key Code Event Viewer is a precision diagnostic utility designed for Frontend Engineers and Game Developers who require absolute clarity on browser input events. When building custom controls, hotkeys, or accessibility features, relying on guesswork for event.code or legacy event.keyCode properties leads to cross-browser inconsistencies.
Input handling is complex. A physical keypress triggers a sequence of DOM events with properties that vary based on locale, operating system, and hardware. This tool exposes the entire KeyboardEvent interface in real-time, visualizing the difference between physical location (code) and produced character (key). It specifically addresses the deprecated vs. modern standards dilemma, ensuring your code works across modern Chrome, Firefox, Safari, and legacy environments.
Formulas
Modern JavaScript relies on distinct properties to handle inputs. The Key represents meaning, while the Code represents physical location.
For game development (WASD movement), always use event.code to ignore user keyboard layouts.
Reference Data
| Property | Description | Example Value | Standard Status |
|---|---|---|---|
| e.key | The value of the key pressed, accounting for modifiers and locale. | "a", "Enter" | Modern |
| e.code | Represents the physical key on the keyboard (layout-independent). | "KeyA", "Space" | Modern |
| e.which | Legacy numeric code. Inconsistent across browsers. | 65, 13 | Deprecated |
| e.keyCode | Legacy numeric code. Often identical to which. | 65 | Deprecated |
| e.location | Indicates location of the key (Standard, Left, Right, Numpad). | 0, 1, 2, 3 | Modern |
| e.shiftKey | Boolean state of the Shift modifier. | TRUE | Stable |