JavaScript Keycode Finder
Press any key to instantly see its JavaScript event properties. Identify event.key, event.code, keyCode, and modifier states.
Advertisement
Press any key...
Advertisement
How to Use the JavaScript Keycode Finder
The JavaScript Keycode Finder is a real-time keyboard event inspector built for web developers. Simply press any key on your keyboard, and the tool instantly displays all of its associated JavaScript event properties. This is invaluable when building keyboard shortcuts, game controls, accessible navigation, or any feature that responds to keyboard input.
When you press a key, the tool captures the keydown event and extracts every relevant property. The most important modern properties are event.key and event.code. The event.key property returns a string representing the value of the key, taking into account the current keyboard layout and any active modifier keys. For example, pressing the "A" key with Shift held down returns "A" (uppercase), while without Shift it returns "a" (lowercase). The event.code property, on the other hand, always returns the physical key identifier regardless of layout or modifiers, making it ideal for WASD-style game controls that should work the same on any keyboard layout.
The legacy properties event.keyCode and event.which are included for reference and backward compatibility, though they are officially deprecated by the W3C. These numeric codes were historically inconsistent across browsers and keyboard layouts, which is why the modern string-based alternatives were introduced. If you are maintaining older code that uses keyCode, this tool helps you quickly look up the numeric value for any key.
The modifier key indicators show you in real time whether Ctrl, Shift, Alt, or Meta (Command on Mac, Windows key on PC) are held down during a key press. This is essential for implementing keyboard shortcuts like Ctrl+S or Cmd+K. The tool also generates a ready-to-use JavaScript code snippet that you can copy and paste directly into your project, saving you time when wiring up keyboard event handlers.
The key history feature at the bottom tracks the last 10 keys you pressed, letting you quickly compare keyCode values between different keys without having to remember them. Click any key in the history to view its properties again. All processing happens entirely in your browser with zero server calls, so the tool works offline and with full privacy.
Frequently Asked Questions
What is the difference between event.key and event.code?
event.key returns the value of the key pressed, taking into account modifiers like Shift. For example, pressing Shift+1 returns '!' for event.key. event.code returns the physical key on the keyboard regardless of modifiers or keyboard layout, such as 'Digit1'. Use event.key when you care about the character typed, and event.code when you care about the physical key location (e.g., for game controls).
Why is event.keyCode deprecated?
event.keyCode is deprecated because its values are inconsistent across browsers and keyboard layouts. The same physical key can return different keyCode values on different platforms. The modern replacements, event.key and event.code, provide consistent and descriptive string values that work reliably across all browsers and layouts. The Web Standards group recommends using event.key and event.code instead.
What does event.location indicate?
event.location indicates where on the keyboard the key is located. A value of 0 (Standard) means the key has only one position. A value of 1 (Left) means it is the left-hand version of a key that appears on both sides, such as Left Shift. A value of 2 (Right) indicates the right-hand version, and 3 (Numpad) indicates a key on the numeric keypad.
How do I detect modifier keys like Ctrl, Shift, Alt, and Meta?
Every keyboard event includes boolean properties: ctrlKey, shiftKey, altKey, and metaKey. These are true when the corresponding modifier is held down during the key press. For example, to detect Ctrl+S, check if event.ctrlKey is true and event.key is 's'. The metaKey corresponds to the Command key on macOS and the Windows key on Windows.
What is the difference between keydown and keyup events?
The keydown event fires when a key is pressed down, and keyup fires when the key is released. keydown fires repeatedly if the key is held down (auto-repeat), while keyup fires only once when released. For most use cases like keyboard shortcuts or game controls, keydown is the preferred event. There was also a keypress event, but it has been deprecated in favor of keydown.
How do I prevent the browser's default behavior for a key?
Call event.preventDefault() inside your keydown or keyup event handler to stop the browser from performing its default action. For example, preventing the default on F5 stops the page from refreshing, and preventing on Ctrl+S stops the save dialog. Be cautious with this approach, as blocking standard keyboard shortcuts can frustrate users and hurt accessibility.