Keycode info

Find the javascript keycode, code, location and modifiers of any pressed key.

Enable JavaScript to use the interactive tool. The guide below explains how it works.

Keycode Info: Master Keyboard Events and Shortcuts

Developing interactive web applications often requires handling keyboard events—whether for custom shortcuts, accessibility features, or game controls. However, different browsers and operating systems can sometimes report keyboard data inconsistently, making it a challenge for developers to know exactly which key codes to use in their code.

The Keycode Info tool provides an instant, real-time breakdown of every keyboard interaction. By simply pressing a key, you get all the technical metadata needed to implement robust keyboard logic in your JavaScript applications.

1. What the Tool Does

This tool captures keyboard events and displays detailed information about the pressed key. It provides the Key name, the legacy Keycode, the physical Code, the Location (e.g., standard vs. numpad), and any active Modifiers (Shift, Ctrl, Alt, Meta). Each value is presented in a copyable format for quick integration into your development workflow.

2. Why Professionals Use It

• Building Shortcuts: Quickly find the correct code or key values to implement custom keyboard shortcuts (e.g., Ctrl + S).
• Debugging Input: Identify why a certain keyboard event might not be behaving as expected in your application.
• Accessibility (A11y): Ensure your application correctly handles "Enter" or "Space" keys for interactive elements.
• Game Development: Map physical key locations (using event.code) to in-game actions, ensuring a consistent layout across different keyboard regions (like QWERTY vs. AZERTY).

3. Step-by-Step Instructions

1. Open the tool page.
2. Click anywhere on the page to ensure it has focus.
3. Press any key on your keyboard.
4. The tool will instantly display the technical details for that specific key.
5. Click the "Copy" icon next to any field (like "Keycode" or "Code") to copy that specific value.

4. Examples

• Scenario 1: Pressing the Enter key.
  • Key: Enter
  • Keycode: 13
  • Code: Enter
• Scenario 2: Pressing Shift + A.
  • Key: A
  • Modifiers: Shift
  • Code: KeyA

5. FAQs

Q: What is the difference between "Key" and "Code"? A: event.key represents the character produced (e.g., "a" or "A"), while event.code represents the physical key on the keyboard (e.g., "KeyA"), regardless of modifiers or layout.

Q: Are "Keycodes" still recommended? A: event.keyCode is technically deprecated in modern web standards, but it is still widely used for legacy support. Most modern applications should prefer event.key or event.code.

6. Common Mistakes

• Ignoring Layouts: Using event.key for game controls can be problematic for international users. Always use event.code if you want to target a physical key location.
• Modifier Confusion: Remember that the "Meta" key refers to the Command key on macOS and the Windows key on Windows/Linux.

7. Real-World Use Cases

• Custom Text Editors: Implementing shortcuts for bold, italic, or saving.
• Browser Games: Mapping WASD or Arrow keys for player movement.
• Form Handling: Preventing default behavior for the "Enter" key in specific input fields.

8. Related Tools

• ASCII to Text: For converting character codes to their visual representation.
• User-Agent Parser: To understand the environment where the keyboard events are firing.

Get the technical "fingerprint" of any keypress in an instant.