Keyboard KeyCode Viewer - JavaScript Key Event Inspector
Interactive JavaScript keyboard event inspector. Press any key to instantly view keyCode, key, code, which, charCode, and modifier states. Essential debugging tool for web developers building keyboard shortcuts and event handlers.
Keyboard KeyCode Viewer - JavaScript Key Event Inspector Tool Introduction
A professional keyboard event inspector designed for web developers. Press any key to instantly see all JavaScript keyboard event properties in real-time. Essential for debugging keyboard interactions, building custom shortcuts, and understanding the Keyboard API.
This tool displays comprehensive information including modern properties (key, code) and legacy properties (keyCode, which, charCode), along with modifier key states and event metadata. Perfect for testing keyboard event handlers across different browsers and keyboard layouts.
Key Features:
- Real-time Detection: Instant display of all keyboard event properties
- Modern Standards: Shows recommended key and code properties
- Legacy Support: Includes deprecated keyCode, which, and charCode for compatibility
- Modifier Keys: Track Shift, Ctrl, Alt, and Meta key states
- Event Types: Distinguish between keydown, keyup, and keypress events
- Key Location: Identify left/right modifier keys and numpad keys
- Copy Functionality: One-click copy of any property value
- Developer Tips: Built-in best practices and recommendations
- Cross-browser: Works consistently across all modern browsers
- Keyboard Layout Aware: Handles different keyboard layouts correctly
Keyboard KeyCode Viewer - JavaScript Key Event Inspector User Guide
How to Use the KeyCode Viewer
- Press Any Key: Click on the tool area and press any key on your keyboard to start
- View Properties: All keyboard event properties will be displayed instantly, including:
- Modern properties: key and code (recommended for new projects)
- Legacy properties: keyCode, which, and charCode (for backward compatibility)
- Copy Values: Click the copy button next to any property to copy its value to clipboard
- Test Modifiers: Hold Shift, Ctrl, Alt, or Meta (Command/Windows) keys alone or in combination to see their states
- Try Special Keys: Test arrow keys, function keys, Enter, Escape, Tab, and other special keys
- Check Location: Press left/right modifier keys or numpad keys to see location property differences
Understanding Keyboard Event Properties
- key: (Recommended) The actual value of the key pressed (e.g., "a", "A", "Enter", "ArrowUp"). Changes based on modifier keys and keyboard layout. Use this for character input detection.
- code: (Recommended) The physical key code representing the key's position on the keyboard (e.g., "KeyA", "Digit1", "ArrowUp"). Consistent across keyboard layouts. Use this for game controls and physical key detection.
- keyCode: (Deprecated) Numeric code for the key (e.g., 65 for "A"). Inconsistent across browsers and keyboards. Avoid in new code.
- which: (Deprecated) Similar to keyCode, used for legacy browser compatibility. Avoid in new code.
- charCode: (Deprecated) Character code for keypress events only. Replaced by key property.
- location: Indicates the physical location of the key (0: standard, 1: left, 2: right, 3: numpad). Useful for distinguishing left/right modifier keys.
Best Practices for Keyboard Events
- Use event.key when you care about what character the user typed (text input, search)
- Use event.code when you care about physical key position (games, WASD controls, keyboard shortcuts)
- Avoid keyCode and which as they're deprecated and inconsistent across browsers
- Check modifier keys using event.shiftKey, event.ctrlKey, event.altKey, event.metaKey
- Use keydown for most keyboard shortcuts (fires repeatedly when held)
- Use keyup for actions that should trigger once when key is released
- Prevent default behavior with event.preventDefault() when implementing custom shortcuts
Common Use Cases
- Keyboard Shortcuts: Detect Ctrl+S, Cmd+K, etc. using code property with modifier checks
- Form Navigation: Handle Enter, Tab, Escape keys using key property
- Game Controls: Use code property for WASD, arrow keys, and action buttons
- Accessibility: Implement keyboard navigation for screen reader users
- Text Editors: Build custom text editing features with precise key detection
Frequently Asked Questions
Related Tools
Microphone Test - Test Your Mic Online
Test your microphone online instantly. Check if your mic is working, view real-time audio levels, and troubleshoot microphone issues. Works with all devices and browsers.
Screen Test - Test Monitor Display Online
Test your screen and monitor display online. Check for dead pixels, color accuracy, brightness uniformity, and screen defects. Works on all devices - PC, laptop, phone, tablet.
Camera Test - Test Webcam Online
Test your webcam and camera online instantly. Check if your camera is working, preview video quality, adjust settings, and troubleshoot camera issues. Works on all devices.
Mouse Test - Test Mouse Buttons, Scroll Wheel & Cursor Online
Free online mouse tester to check all mouse buttons (left, right, middle, side buttons), scroll wheel, cursor movement, and double-click speed. Instantly diagnose mouse problems on any device without installation.
Keyboard Test - Test Keyboard Keys Online
Test your keyboard keys online instantly. Check if all keys are working properly including letters, numbers, function keys, and special keys. Works on all devices.