Toolsvana→Developer Tools→JavaScript KeyCode Finder

JavaScript KeyCode Finder

Press any key to get its keyCode, key, code, and which values

🖥️

Click here and press any key...

Focus this area first, then press a key to see its details

About JavaScript Keycode Finder

The JavaScript Keycode Finder is a free, interactive developer tool designed to instantly reveal every keyboard event property when you press any key. Whether you are building keyboard shortcuts, game controls, or accessible navigation, knowing the exact values of event.key, event.code, event.keyCode, and event.which is essential for writing reliable, cross-browser JavaScript.

Modern web applications rely heavily on keyboard event handling for everything from form validation to real-time collaboration tools. This keycode lookup utility eliminates guesswork by displaying the physical key code, logical key value, location identifier, and all modifier states (Shift, Ctrl, Alt, Meta) the moment a key is pressed, right in your browser with zero setup required.

Unlike static keycode reference tables, this live JavaScript key event tester captures real browser events so you can verify behavior across different operating systems and keyboard layouts. It also clearly marks which properties are deprecated, helping you write future-proof code that follows current W3C Keyboard Event standards.

Key Features

Real-time display of event.key, event.code, event.keyCode, event.which, and event.location
Visual modifier key indicators showing Shift, Ctrl, Alt, and Meta states
Deprecation badges on legacy properties like keyCode and which
One-click copy for any individual event property value
Export all key data as a formatted JSON object
History table tracking your last 10 key presses for comparison
Distinguishes left, right, and numpad key locations automatically
Visual keyboard key rendering for intuitive identification
Works with every key including function keys, arrows, and special characters
Fully responsive design with dark mode support

How to Use the JavaScript Keycode Finder

Focus the input area: Click anywhere inside the dashed key press zone at the top of the tool to activate keyboard listening.
Press any key: Hit any key on your keyboard and all event properties will appear instantly in the property grid below.
Review modifier states: Check the Shift, Ctrl, Alt, and Meta indicators to see which modifiers were active during the key press.
Copy values: Click the copy icon next to any property to copy its value, or use the "Copy All as JSON" button to export every property at once.
Compare keys: Press multiple keys in sequence and scroll down to the history table to compare their codes side by side.
Clear and repeat: Hit the Clear button to reset all data and start a fresh testing session.

Use Cases

Keyboard shortcut development: Identify the correct key and code values to implement custom shortcuts in web applications.
Game controls: Map physical keys to game actions by checking event.code for layout-independent keybindings.
Accessibility testing: Verify that keyboard navigation works correctly and all interactive elements respond to expected keys.
Legacy code migration: Find modern event.key equivalents for deprecated event.keyCode values used in older projects.
Cross-browser debugging: Confirm that key events produce consistent values across Chrome, Firefox, Safari, and Edge.
Input form validation: Determine exact key values to allow or block specific characters in text fields.
Tutorial & documentation writing: Quickly look up accurate keycode data to include in developer guides and reference material.
Numpad vs. main keyboard differentiation: Use the location property to distinguish between numpad and standard number keys.

Frequently Asked Questions

What is the difference between event.key and event.code?

event.key returns the logical value of the key (e.g., "a" or "A" depending on Shift), while event.code returns the physical key on the keyboard (e.g., "KeyA") regardless of modifiers or keyboard layout. Use event.key for character input and event.code for position-based shortcuts.

Is event.keyCode still safe to use?

event.keyCode is officially deprecated by the W3C and may behave inconsistently across browsers. For new projects, use event.key or event.code. However, many legacy codebases still rely on keyCode, so this tool displays it for backward-compatibility reference.

Why does the location field matter?

The event.location property distinguishes between keys that appear in multiple places on a keyboard, such as Left Shift vs. Right Shift, or the number row vs. the numpad. This is critical for applications that need to differentiate between duplicate keys.

Is this tool free?

Yes, the JavaScript Keycode Finder is completely free to use with no sign-up, no usage limits, and no hidden fees. You can use it as often as you need for development and testing.

Is my data secure?

Absolutely. All key detection happens entirely in your browser using native JavaScript keyboard events. No keystrokes or event data are ever sent to a server. Your input stays completely private on your device.

Does this work on mobile devices?

The tool works best with a physical keyboard. On mobile devices, the on-screen keyboard may not trigger all event properties consistently. For reliable results, use a desktop or laptop computer, or connect an external keyboard to your mobile device.

Tips & Best Practices

Prefer event.key for character input: It accounts for keyboard layout, language, and modifier state automatically.
Use event.code for game controls: Physical key positions remain consistent regardless of the user's keyboard layout (QWERTY, AZERTY, Dvorak).
Always test modifier combinations: Press Ctrl+Shift+Key or Alt+Key to confirm your shortcut listeners capture the correct combination.
Check the history table for patterns: Comparing multiple key presses helps you spot inconsistencies or find the right codes faster.
Export JSON for documentation: Use the "Copy All as JSON" feature to paste accurate key data directly into your codebase comments or developer docs.
Test across browsers: Key event values can vary between browsers, especially for special keys. Always verify your target browsers.