What is the difference between event.key and event.code?

event.key represents the character value ("a", "A", "Enter"), which changes based on keyboard layout and modifier keys. event.code represents the physical key location ("KeyA", "Enter"), which stays constant regardless of layout. Use event.key for character input, event.code for game controls.

Why are event.keyCode and event.which deprecated?

These properties are deprecated because they are inconsistent across browsers and keyboards. event.key and event.code provide clearer, more reliable alternatives. However, legacy code still uses them, so this tool shows both old and new properties.

How do I detect modifier keys?

Use the boolean properties event.ctrlKey, event.altKey, event.shiftKey, and event.metaKey (Command on Mac, Windows key on PC). These work reliably across all browsers and are the recommended way to detect modifier combinations.

Why do some keys not trigger events?

System-level shortcuts (like Alt+Tab, Ctrl+Alt+Del) are captured by the OS before reaching the browser. Some browser shortcuts (Ctrl+T, Ctrl+W) are also intercepted. Additionally, the page must have focus for keyboard events to fire.

Can I test keyboard ghosting?

Yes! Press multiple keys simultaneously and see which combinations register. Keyboard ghosting occurs when certain key combinations cannot be detected due to hardware limitations in the keyboard matrix. Gaming keyboards typically have anti-ghosting features.

Keyboard Event Viewer

Keyboard Event Viewer Overview

View detailed keyboard event data including key codes and modifiers.

Keyboard Event Viewer is a developer-focused diagnostic tool that inspects JavaScript keyboard events in real-time, displaying detailed information about `keydown` and `keyup` events including `event.key`, `event.code`, `event.which`, key codes, and modifier states (Ctrl, Alt, Shift, Meta). This tool is essential for web developers implementing keyboard shortcuts, debugging input handling, understanding cross-browser keyboard behavior, and testing keyboard accessibility features. The viewer shows comprehensive event data including the modern `event.key` (character value), `event.code` (physical key location), deprecated `event.which` and `event.keyCode` values, key location (standard, left, right, numpad), and all active modifier keys. Understanding keyboard events is crucial for creating accessible web applications, implementing custom keyboard navigation, building keyboard-driven interfaces, and ensuring consistent behavior across different operating systems and browsers. Keyboard event handling varies between browsers, operating systems, and keyboard layouts, making this testing tool invaluable for cross-platform development. This keyboard tester is essential for web developers building keyboard shortcuts, accessibility engineers testing keyboard navigation, game developers implementing controls, and anyone debugging keyboard input issues.

How to Use Keyboard Event Viewer

Click on the capture area.
Press any key on your keyboard.
See detailed event information like Key Code, Location, and deprecated values.
Use this to debug keyboard shortcuts or input handling.
Test modifier combinations (Ctrl+Key, Alt+Key, etc.)

Frequently Asked Questions

What is the difference between event.key and event.code?: event.key represents the character value ("a", "A", "Enter"), which changes based on keyboard layout and modifier keys. event.code represents the physical key location ("KeyA", "Enter"), which stays constant regardless of layout. Use event.key for character input, event.code for game controls.
Why are event.keyCode and event.which deprecated?: These properties are deprecated because they are inconsistent across browsers and keyboards. event.key and event.code provide clearer, more reliable alternatives. However, legacy code still uses them, so this tool shows both old and new properties.
How do I detect modifier keys?: Use the boolean properties event.ctrlKey, event.altKey, event.shiftKey, and event.metaKey (Command on Mac, Windows key on PC). These work reliably across all browsers and are the recommended way to detect modifier combinations.
Why do some keys not trigger events?: System-level shortcuts (like Alt+Tab, Ctrl+Alt+Del) are captured by the OS before reaching the browser. Some browser shortcuts (Ctrl+T, Ctrl+W) are also intercepted. Additionally, the page must have focus for keyboard events to fire.
Can I test keyboard ghosting?: Yes! Press multiple keys simultaneously and see which combinations register. Keyboard ghosting occurs when certain key combinations cannot be detected due to hardware limitations in the keyboard matrix. Gaming keyboards typically have anti-ghosting features.

Related Dev Tools

IP Geolocation - Find location data for any IP address
Domain Availability - Check if a domain name is available for registration
React Component Gen - Generate boilerplate for React components
.htaccess File Generator - Create Apache redirects and security rules
robots.txt Tester - Test if a specific URL is allowed by robots.txt
JSON to TOON Converter - Optimize JSON for LLMs (30-60% Token Reduction)
Regex Tester - Test and debug regular expressions
UUID Generator - Generate unique identifiers (UUIDs/GUIDs) instantly