⌨️ JavaScript Developer Tool

JavaScript Key Code Finder

Press any key on your keyboard to instantly get event.key, event.code, event.keyCode, modifier states, and location values. Perfect for building keyboard shortcuts, games, and interactive web applications.

Press Any Key

👇 Click inside this area and press any key on your keyboard

💡 Focus is automatically set. Start typing anywhere!

event.key

—

The actual key value

event.code

—

Physical key position

event.keyCode

—

Deprecated but widely used

event.location

—

Left/Right key detection

🎛️ Modifier Key States

Shift

❌

Ctrl

❌

Alt

❌

Meta (Win/Cmd)

❌

📋 Copy-Paste JavaScript Code

document.addEventListener('keydown', (event) => {
                console.log('Key pressed:', event.key);
                console.log('Key code:', event.code);
                console.log('KeyCode:', event.keyCode);
                console.log('Shift:', event.shiftKey);
                console.log('Ctrl:', event.ctrlKey);
                console.log('Alt:', event.altKey);
                console.log('Meta:', event.metaKey);
                });

💡 Use this code in your project to detect keyboard events. event.key is the modern standard, event.keyCode is deprecated but still widely used.

📋 Common Key Values (event.key)

Enter → "Enter"

Space → " "

Escape → "Escape"

Tab → "Tab"

Backspace → "Backspace"

Delete → "Delete"

ArrowUp → "ArrowUp"

ArrowDown → "ArrowDown"

ArrowLeft → "ArrowLeft"

ArrowRight → "ArrowRight"

⌨️ Common Key Codes (event.keyCode)

Enter → 13

Space → 32

Escape → 27

Tab → 9

Backspace → 8

Delete → 46

ArrowUp → 38

ArrowDown → 40

ArrowLeft → 37

ArrowRight → 39

⌨️ Understanding JavaScript Keyboard Events

JavaScript keyboard events are essential for creating interactive web applications, games, text editors, and custom keyboard shortcuts. When a user presses a key, the browser fires three events in sequence: keydown (when key is pressed), keypress (deprecated, for character keys), and keyup (when key is released). Each event provides properties that tell you exactly which key was pressed, where it's located on the keyboard, and which modifier keys (Shift, Ctrl, Alt, Meta) are active.

Our JavaScript Key Code Finder helps developers understand these properties in real-time. Press any key and instantly see event.key (the logical key value), event.code (the physical key position), and event.keyCode (the deprecated numeric code). This is invaluable for debugging keyboard shortcuts, building custom input handlers, and understanding cross-browser keyboard behavior.

💡 Pro Tip: Use event.key for modern applications. It returns human-readable strings like "Enter", "ArrowUp", "a", "A" (with Shift). Avoid event.keyCode as it's deprecated and behaves inconsistently across browsers.

📖 Keyboard Event Properties Explained

event.key

Returns the character value of the key. For letter keys, it respects Shift/CapsLock. Returns "Enter", "ArrowUp", "Escape" for special keys. This is the recommended property to use.

event.code

Returns the physical key location independent of keyboard layout. For US keyboards, "KeyA" is always the A key even if the user has a different layout. Perfect for game controls.

event.keyCode (Deprecated)

Legacy numeric code. Still widely used in older codebases. Different browsers report different values for the same key.

event.location

Indicates whether the key is on the left or right side (for Shift, Ctrl, Alt, Meta). Values: 0=standard, 1=left, 2=right, 3=numpad.

🎯 Real-World Applications of Keyboard Detection

⌨️ Custom Keyboard Shortcuts: Ctrl+S to save, Ctrl+Z to undo, Ctrl+F to search in web applications.
🎮 Browser-Based Games: WASD or arrow keys for movement, spacebar to jump.
📝 Rich Text Editors: Formatting shortcuts (Bold: Ctrl+B, Italic: Ctrl+I, Underline: Ctrl+U).
🔍 Search & Filter Inputs: Live search as user types, Enter to submit.
🧩 Accessibility Features: Keyboard navigation for users who cannot use a mouse.
📱 Terminal/Console Emulators: Detecting arrow keys for command history.
🔒 Password Strength Meters: Detecting modifier keys in real-time.

🚀 Advanced Keyboard Event Patterns

Detecting Keyboard Shortcuts

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

Prevent default browser behavior for custom shortcuts

Handling Game Input

const keys = {};
document.addEventListener('keydown', (e) => keys[e.code] = true);
document.addEventListener('keyup', (e) => keys[e.code] = false);

Track multiple simultaneous key presses

Cross-Browser Compatibilityconst key = e.key || e.keyCode;

Fallback for older browsers without event.key

Input Filtering

if (!/[a-zA-Z0-9]/.test(e.key)) {
  e.preventDefault();
}

Allow only alphanumeric characters in input fields

⚠️ Common Keyboard Event Pitfalls

Browser Shortcut Conflicts: Ctrl+N opens new window, Ctrl+P opens print dialog. Use e.preventDefault() to override but use sparingly.
Keyboard Layout Differences: event.code solves this by targeting physical keys, but be aware that different countries use different layouts.
Mobile Devices: Software keyboards fire limited keyboard events. Some keys (like modifiers) may not trigger events at all.
Auto-Repeat Behavior: Holding down a key fires keydown repeatedly. Use flags to handle single vs repeated actions.
event.key for Shifted Characters: "a" vs "A" depends on Shift key state. Always compare carefully.

❓ Frequently Asked Questions

1. What's the difference between event.key and event.code?

event.key returns the character value (what the key produces), while event.code returns the physical key position regardless of keyboard layout. For example, on a QWERTY keyboard, pressing the A key gives event.key="a" and event.code="KeyA". On an AZERTY keyboard, the same physical key might give event.key="q" but event.code="KeyA". Use event.code for game controls, event.key for text input.

2. Is event.keyCode deprecated?

Yes, event.keyCode is officially deprecated and should not be used in new projects. Use event.key instead. However, many legacy codebases still rely on keyCode, and some browsers continue to support it for backward compatibility.

3. How do I detect modifier keys (Shift, Ctrl, Alt)?

Use the boolean properties: event.shiftKey, event.ctrlKey, event.altKey, event.metaKey. They are true when the modifier is pressed during the key event. This works for all key events (keydown, keyup, keypress).

4. Why are some keys not detected?

Some special keys like the Windows key, Fn key, or media keys may not fire keyboard events due to OS-level handling. Also, the keypress event has been deprecated and only works for printable characters.

5. How do I prevent default browser behavior for shortcuts?

Call event.preventDefault() inside your event listener. For example, to disable Ctrl+S, check if e.ctrlKey && e.key === 's', then preventDefault(). However, respect user expectations and don't override critical browser shortcuts (like Ctrl+T for new tab).

6. Does this work on mobile devices?

Yes, but with limitations. External keyboards connected to iPads/Android tablets work fully. On-screen keyboards fire limited events — typically only when keys are pressed, and modifier keys like Shift may not work as expected.

7. Is this tool really free?

100% free forever! No sign-up, no watermarks, no hidden limits. Use it for unlimited key code testing, debugging, and development work.

🔗 Related Developer Tools

📦 JS to JSON 🔧 HTML Entity 🔍 User Agent 📄 JSON Formatter

Discover 200+ free online tools at ToolHub — all private, no sign-up, lightning fast.

⚠️ Disclaimer: This tool is for educational and development purposes. Keyboard events behave differently across operating systems and browsers. Always test your implementation in target environments. ToolHub does not store any keystroke data — all detection happens locally in your browser.