Press any key on your keyboard to instantly see its keycode, key, code, and event properties. Essential tool for web developers building keyboard interactions.
Press any key to see event properties...
-
event.key
-
event.code
-
event.keyCode
-
event.which
-
event.charCode
-
event.location
Shift
false
Ctrl
false
Alt
false
Meta
false
Key
Code
keyCode
Modifiers
Event
About the Keycode Info Tool
Keyboard events are a fundamental part of web development, powering everything from keyboard shortcuts and hotkeys to gaming controls and form validation. However, the JavaScript keyboard event API can be confusing with its multiple properties: key, code, keyCode, which, charCode, and location. Our Keycode Info tool provides an interactive, real-time reference that shows you exactly what each property returns for every key you press.
Whether you are building a keyboard shortcut system, creating a custom game controller, implementing accessible form navigation, or debugging why a key event isn't firing as expected, this tool gives you instant visual feedback on all keyboard event properties without writing any code.
How to Use the Keycode Info Tool
Click "Start Listening": Activate the keyboard event listener to begin capturing key presses in real time.
Press any key: Hit any key on your keyboard. The tool immediately displays all keyboard event properties in organized boxes.
Review modifier states: Check the Shift, Ctrl, Alt, and Meta (Command) modifier key states for the current event.
Browse the history: Scroll through the Key Press History table to compare multiple key events and identify patterns.
Real-Time DetectionSee keyboard event properties update instantly as you press keys on your keyboard.
All Properties DisplayedView event.key, event.code, event.keyCode, event.which, event.charCode, and event.location simultaneously.
Modifier TrackingTrack Shift, Ctrl, Alt, and Meta key states with each key press event.
Event History LogKeep a scrollable log of recent key presses for comparison and debugging.
Start/Stop ControlToggle the listener on and off to avoid capturing unwanted keystrokes during testing.
Visual Key DisplayProminent display area shows the last pressed key in a large, easy-to-read format.
Understanding Keyboard Event Properties
The event.key property returns the value of the key pressed (like "a", "Enter", "Shift"), while event.code returns the physical key on the keyboard ("KeyA", "EnterLeft", "ShiftLeft"). The deprecated event.keyCode and event.which return numeric codes. The event.location distinguishes between left and right modifier keys, numpad keys, and other physical locations. Understanding these differences is crucial for building reliable keyboard handlers.
Use Cases
Keyboard ShortcutsIdentify exact key codes and modifier combinations for building custom shortcut systems.
Game DevelopmentMap keyboard inputs to game actions using accurate key codes and physical key positions.
Accessibility ToolsBuild keyboard navigation systems that work correctly across different keyboard layouts.
Debugging EventsDiagnose why keyboard event listeners are not triggering as expected in your application.
Why Choose TooliFyra for Keycode Reference?
TooliFyra's Keycode Info tool is the most comprehensive interactive keyboard event reference available online. It displays every relevant keyboard event property simultaneously, tracks modifier states, and maintains a history log for comparison. The real-time visual feedback eliminates the need to add console.log statements to your code, saving you time and reducing debugging iterations.
Frequently Asked Questions
event.key returns the character or key name (like "a" or "Enter"), while event.code returns the physical key position on the keyboard (like "KeyA" or "EnterLeft"). On different keyboard layouts, the same physical key may produce different event.key values but the same event.code.
Yes, event.keyCode and event.which are deprecated in modern web standards. However, they are still widely supported for backward compatibility. Modern code should prefer event.key and event.code for new implementations.
event.location distinguishes between physically different keys that produce the same key value. For example, the left Shift (location 1) and right Shift (location 2) both have event.key="Shift" but different locations, allowing you to differentiate them in your event handlers.
Yes, on mobile devices and virtual keyboards, the tool captures virtual key presses, though some properties like event.code may not be available for virtual keyboard events.
Related IT Tools
More developer and IT tools to boost your productivity
