Press any key to see event data
Use event.key for the character value, event.code for the physical key position.keyCode and which are deprecated but still widely used.
Get up and running in 30 seconds
Click anywhere on the page to ensure it has focus. The tool listens for keyboard events on the entire window.
Press any key on your keyboard. The tool will instantly display all event properties including key, code, keyCode, which, and charCode.
See the key value, physical key code, deprecated keyCode, and modifier keys (Ctrl, Shift, Alt, Meta) all in one view.
Use the generated JavaScript code snippet as a starting point for implementing keyboard event handlers in your applications.
Understanding keyboard events
JavaScript keyboard events allow web applications to respond to user input from keyboards. Every key press triggers events containing detailed information about which key was pressed, its physical location, modifier states, and more. Understanding these events is essential for building accessible, keyboard-navigable web applications.
The keyboard event model has evolved significantly. Early JavaScript relied on keyCode and which properties, which were inconsistent across browsers and platforms. Modern JavaScript uses the key and code properties from the DOM Level 3 Events specification, providing reliable, cross-browser keyboard event handling.
keydown: Fires when a key is pressed down. This is the first event in the sequence and fires repeatedly if the key is held down. Use this for detecting modifier combinations and preventing default browser behavior.
keypress: (Deprecated) Historically fired for character keys after keydown. This event is deprecated and should not be used in modern applications. Use keydown or beforeinput instead.
keyup: Fires when a key is released. Use this when you need to detect the end of a key press or when measuring how long a key was held down.
event.key (Modern): Returns the character value of the key pressed. For printable keys, this is the actual character ("a", "A", "1", "!"). For non-printable keys, it describes the key ("Enter", "Tab", "ArrowUp", "Escape"). This is the recommended property for new code.
event.code (Modern): Returns the physical key location on the keyboard, independent of keyboard layout. "KeyA" always refers to the A key position, regardless of whether it produces "a" or "q" on different layouts. Use this for game controls or when physical position matters more than character value.
event.keyCode (Legacy): Numeric code representing the key. Deprecated but widely supported. Values vary between browsers for some keys. Avoid in new code.
event.which (Legacy): Similar to keyCode, also deprecated. jQuery normalized this property, which is why many legacy codebases use it.
Different keyboard layouts (QWERTY, AZERTY, QWERTZ, Dvorak) produce different characters from the same physical keys. The key property reflects the actual character, while code reflects the physical position.
For example, pressing the top-left letter key:
Use code for game controls where WASD should always map to the same physical positions. Use key for text input where you care about the character being typed.
How developers use keyboard events
Add keyboard shortcuts to your web application for power users. Detect Ctrl+S for save, Ctrl+K for search, or custom shortcuts for your interface.
Implement keyboard navigation for complex components like dropdowns, modals, and data grids. Support arrow keys, Escape, Enter, and Tab navigation.
Use event.code for game controls to ensure consistent physical key positions regardless of keyboard layout. WASD controls should feel the same on QWERTY and AZERTY keyboards.
Restrict input to specific characters in form fields. Prevent non-numeric input in number fields or validate as the user types.
Master keyboard event detection
This interactive tool helps you explore JavaScript keyboard events in real-time. Press any key to see all event properties, then use this information to implement keyboard handling in your applications.
Focus the page and press any key. The large display shows the key value (what character was produced) and code (physical key position). Below, you'll see all event properties including deprecated keyCode and which values for legacy code reference.
The modifier section shows which modifier keys (Ctrl, Shift, Alt, Meta/Cmd) were held down when the key was pressed. This is essential for implementing keyboard shortcuts.
event.key: Use this for most cases. It gives you the actual character or key name. "a" for the A key, "Enter" for Enter, "ArrowUp" for the up arrow.
event.code: Use this when physical key position matters more than the character. "KeyA" is always the top-left letter key, regardless of keyboard layout.
event.keyCode / which: These are deprecated but shown for reference when working with legacy codebases or libraries that still use them.
event.location: Distinguishes between left and right modifier keys (Left Shift vs Right Shift) or numpad keys.
The tool generates a JavaScript code snippet for each key pressed. Copy this as a starting point for your event handlers. The snippet shows the recommended pattern: check both key and code depending on your needs.
Recent keys appear below the main display. Click any history item to view its details again. This helps compare different keys or modifier combinations.
Everything you need to know
Your data never leaves your browser
All keyboard event processing happens entirely in your browser. This tool does not send any data to servers, log keystrokes, or track which keys you press. Your keyboard activity remains completely private.
This tool is safe to use for testing any keyboard combinations, including those used in proprietary applications or confidential workflows. Your keyboard patterns and shortcuts remain private.
Performance metrics
Showing 8 of 94 related tools