JavaScript Keycode Info

Understanding JavaScript Key Events and Keycodes

When developing web applications, handling keyboard input is crucial for accessibility, game development, and custom shortcuts. JavaScript provides the `KeyboardEvent` interface which describes a user interaction with the keyboard. This tool visualizes the three most important properties of these events: `event.key`, `event.code`, and the deprecated `event.which`.

Key Properties Explained

• event.key: Represents the value of the key pressed. If you press "a", the value is "a". However, if you hold Shift and press "a", the value becomes "A". This property is ideal for text input handling.
• event.code: Represents the physical key on the keyboard (e.g., "KeyA", "Space", "Enter"). This value does not change based on the keyboard layout (QWERTY, AZERTY) or modifier keys. It is perfect for gaming controls (e.g., WASD movement) where physical location matters more than the character produced.
• event.which / event.keyCode: These numeric codes represent the system-specific code for the key. While widely used in older scripts (e.g., Enter is 13, Space is 32), they are now deprecated and inconsistently supported across browsers. Modern development should prefer `key` or `code`.

Common Keycode Values

Here are some frequently used codes for quick reference:Enter (13), Space (32), Escape (27), Backspace (8), Tab (9), and arrow keys (37-40).

Why Use This Tool?

This Keycode Info tool helps developers instantly debug keyboard events. Whether you are building a custom text editor, a browser game, or creating keyboard shortcuts for your SaaS, knowing exactly what data the browser receives is essential.