JavaScript KeyCode Finder
Press any physical key on your keyboard to instantly inspect its event.key, event.code, legacy event.which / keyCode values, modifier states, and event listeners.
Detects keyboard layout differences, function keys, media keys, and numpad codes.
// Vanilla JavaScript Keyboard Listener
window.addEventListener('keydown', (e) => {
if (e.code === 'Enter') {
console.log('Pressed Enter [Enter]');
// Your logic here
}
});// React useEffect Keyboard Listener
import { useEffect } from 'react';
export function useKeyAction() {
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.code === 'Enter') {
console.log('Triggered Enter');
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, []);
}Interactive JavaScript Keyboard Event Inspector
Handling keyboard shortcuts, game controls, and navigation accessibility requires precise knowledge of keyboard event properties across different operating systems and physical keyboard layouts.
The JavaScript KeyCode Finder listens to keydown events in real time, displaying modern standard properties (event.key, event.code) alongside legacy numeric codes (event.keyCode, event.which), key locations, modifier states, and ready-to-use event listener snippets.
Core Tool Capabilities
- Real-Time Keystroke Capture: Captures and analyzes keydown events instantaneously with full property breakdown.
- Modern & Legacy Codes: Displays standard event.key, event.code as well as legacy numeric keyCode and which identifiers.
- Modifier State Detection: Tracks active status for Shift, Control, Alt/Option, and Meta/Command modifier keys.
- Snippet Code Generation: Produces clean vanilla JavaScript event listeners and React useEffect hooks.
Local Browser Privacy
Your files are processed locally on your device. Files are not uploaded, transmitted, or stored on remote servers.
Once the page has loaded, you can disconnect your network connection and continue using this tool offline.
Target Use Cases
- • Building Keyboard Shortcuts
- • Web Game Controls
- • Accessible Form Navigation
- • Cross-Platform Keyboard Testing
Technical Specifications & Platform Limits
Supports event.key, event.code, and DOM_KEY_LOCATION constants
One-click copyable listener templates
Instant replay and inspection of previous keystrokes
Keystrokes are never transmitted or stored externally
Step-by-Step Workflow
Press Any Key
Press any physical or virtual key on your keyboard while viewing this page.
Inspect Event Properties
Examine event.key, event.code, legacy numeric keyCode, and location in real time.
Check Active Modifiers
Observe active states for Ctrl, Shift, Alt, and Meta keys.
Copy Code Snippet
Copy the generated vanilla JS listener or React useEffect hook into your project.
Practical Real-World Use Cases
Building Keyboard Shortcuts
Determine exact key codes and identifiers for application hotkeys and accelerators.
Web Game Controls
Inspect physical key locations (WASD, Arrow keys, Numpad) for responsive gaming inputs.
Accessible Form Navigation
Implement accessible keyboard interactions (Enter, Space, Escape, Tab) for modals and dropdowns.
Cross-Platform Keyboard Testing
Verify key event differences between Mac Command, Windows Ctrl, and international keyboards.
Frequently Asked Questions
- Why is event.keyCode deprecated in modern web standards?
- The W3C deprecated event.keyCode because numeric codes vary between keyboard layouts and operating systems. Developers should prefer event.key (for characters) and event.code (for physical key locations).
- What is the difference between event.key and event.code?
- event.key represents the character value produced (taking into account Shift or CapsLock, e.g. 'A' vs 'a'), while event.code represents the physical key position on the keyboard (e.g. 'KeyA').
- What does event.location mean?
- event.location indicates where the key is located on the keyboard: 0 for Standard, 1 for Left (e.g. Left Shift), 2 for Right (e.g. Right Shift), and 3 for Numpad.
- Are my keystrokes logged or transmitted?
- No. Key events are handled strictly in local browser memory and never leave your device.
Share this tool
Help others discover this utility. No login or registration required.
Master this tool with Guides & Articles
Learn the workflows, common mistakes, and advanced techniques behind Keycode Finder - Identify Keyboard and Event Key Codes with our deep-dive educational content.
Building a Custom Developer Toolbox with Browser Utilities
A practical guide to assembling browser-native developer workflows for formatting, validation, URL checks, payload preparation, security review, and deployment preflight.
Identifying CSS Bloat in Modern UI Components
A frontend workflow guide to finding CSS bloat, reducing unused styles, controlling Tailwind utility growth, and keeping component systems maintainable.
Cleaning Messy JSON for API Performance and Reliability
A developer workflow guide to JSON cleanup, validation, schema alignment, payload size, and debugging API data before production handoff.