Keycode info

Inspect keyboard event details

All computation runs locally in your browser

Last updated: February 4, 2026

CreatorFrank Zhao

Press any key

Press the key on your keyboard you want to get info about this key

Key

Keycode

Code

Location

Modifiers

Keyboard events can be deceptively tricky: different layouts, left/right modifier keys, and mobile keyboards all behave a little differently. This guide explains what each field means and how to use Keycode info to debug shortcuts, hotkeys, and cross-browser issues.

→Introduction / overview
→How to use / quick start
→Real-world examples
→Common scenarios
→Tips & best practices
→Calculation method
→Related concepts
→Frequently asked questions
→Limitations / disclaimers
→External references

Introduction / overview

Keycode info is a small inspector for KeyboardEvent properties. Press any key and it shows the values you typically need when building shortcuts: key, keyCode, code, location, and modifiers.

What problems does it solve?

Pick the correct value for key bindings (usually code or key).
Debug why a shortcut only works on some keyboards or in some browsers.
Confirm whether you’re seeing left/right modifier keys (via location).

Developers

Implementing hotkeys, editors, or web apps with shortcuts.

QA / Support

Reproducing keyboard issues reported by users.

Security teams

Auditing keyboard-driven flows (e.g., OTP entry, admin panels).

If you’re working on authentication flows, you might also like our OTP code generator or Basic auth generator to sanity-check your client/server implementation.

How to use / quick start

1Click anywhere on the page (so your browser focus is inside the tool).
2Press the key you want to inspect. The large title shows $\text{key}$ .
3Read the rows below: $\text{code}$ (physical key), $\text{keyCode}$ (legacy number), $\text{location}$ (left/right/numpad), and modifiers.
4Use the copy icon to copy a single field into your code or issue report.
5If you need to share, use the share button under the tool to generate a link.

Worked example 1: press Shift

On most keyboards, pressing Shift yields values similar to these:

\text{key}=\text{Shift}

\text{keyCode}=16

\text{code}=\text{ShiftLeft}

\text{location}=1

\text{modifiers}=\text{Meta} + \text{Shift}\ (\text{if Meta is held})

When implementing a shortcut like “Shift + K”, you typically check $\text{event.shiftKey}$ and the actual key using $\text{key}$ or $\text{code}$ .

Worked example 2: Enter vs NumpadEnter

Some keys have different physical locations. For example, the main Enter key and the numpad Enter key often differ by $\text{code}$ and $\text{location}$ :

\text{Main Enter:}

\text{code}=\text{Enter}

,

\text{location}=0

\quad

\text{Numpad Enter:}

\text{code}=\text{NumpadEnter}

,

\text{location}=3

If you want the shortcut to work for both, prefer checking $\text{key}=\text{Enter}$ or handle both codes.

Real-world examples / use cases

A code editor shortcut (Cmd/Ctrl + K)

You are implementing a shortcut to open a command palette in a web editor.

Inputs

\text{modifiers}=\text{Meta}

\text{key}=\text{k}

Result

\text{Handle if }\text{event.metaKey}=\text{true}\ \wedge\ \text{key}=\text{k}

How to apply it: Use the tool to confirm the key is lowercase/uppercase on your layout, then normalize in code.

A shortcut works on US layout but fails elsewhere

A teammate reports that your “Alt + /” shortcut does nothing on a different keyboard layout.

Inputs

\text{key}=/

\text{code}=\text{Slash}

Result

\text{Prefer }\text{code}=\text{Slash}\ \text{for a physical key binding}

How to apply it: If you want the physical key, bind by code; if you want the character, bind by key.

Different behavior for left vs right Shift

You are building an accessibility feature where Right Shift toggles a mode.

Inputs

\text{code}=\text{ShiftLeft}\ \text{or}\ \text{ShiftRight}

\text{location}=1\ \text{or}\ 2

Result

\text{Match }\text{code}=\text{ShiftRight}\ \text{or location}=2

How to apply it: Use location as a fallback if code is missing in an embedded environment.

Laptop function keys and media keys

F-keys may trigger brightness/volume unless the user holds Fn (hardware-dependent).

Inputs

\text{key}=\text{F1}

\text{key}=\text{AudioVolumeUp}

Result

\text{Expect different }\text{key}\ \text{values on different devices}

How to apply it: Document alternate bindings or allow user-custom shortcuts.

Common scenarios / when to use

Defining shortcuts

Choose whether to bind by character (key) or physical key (code).

Debugging mismatch reports

Compare values from different OS/browsers to find the difference.

Left/right modifiers

Use location and code to distinguish Shift/Ctrl/Alt variants.

Laptop function keys

Understand why media keys trigger instead of F-keys.

Mobile keyboards

See whether mobile browsers emit the same keys as desktop.

Security reviews

Validate that keyboard-only flows are reachable and consistent.

If you’re implementing shortcuts for a global audience, it’s often best to provide a settings screen where users can rebind keys instead of hard-coding a single layout.

Tips & best practices

Prefer modern fields

Use $\text{key}$ and $\text{code}$ in new code. $\text{keyCode}$ is legacy and can be inconsistent.

Normalize when you mean “character”

If you bind a shortcut by $\text{key}$ , consider normalizing case: $\text{key.toLowerCase()}$ .

Make shortcuts configurable

Layouts differ. A configurable shortcut system reduces support tickets and helps international users.

Copy just what you need

When filing a bug report, pasting $\text{key}$ , $\text{code}$ and modifier state is usually enough to reproduce.

Calculation method / formula explanation

This tool doesn’t “compute” a numeric answer the way a math calculator does. It simply displays the browser’s KeyboardEvent fields. Still, it helps to think of a key press as a bundle of values:

E = \{\text{key},\ \text{code},\ \text{keyCode},\ \text{location},\ \text{modifiers}\}

Each field answers a different question about the same key press.

How to interpret the fields

\text{key}

is the value the user “typed” (affected by layout and Shift).

\text{code}

is the physical key position (e.g.,

\text{KeyA}

\text{keyCode}

is a legacy integer (kept mainly for older code).

\text{location}

indicates which instance of a key was pressed.

\text{location}\in\{0,1,2,3\}

=

\{\text{standard},\ \text{left},\ \text{right},\ \text{numpad}\}

Modifiers can be treated as a set of booleans: $(\text{ctrlKey},\ \text{altKey},\ \text{shiftKey},\ \text{metaKey})$ . In this tool we display them as a human-readable string.

Related concepts / background info

Key vs Code

$\text{key}$ answers “what character/action did the user intend?” while $\text{code}$ answers “which physical key did they press?”.

If you bind $\text{Ctrl}+\text{/}$ by character, it may move on non‑US layouts. If you bind by physical key, it stays on the same key but may produce a different character.

Why keyCode still shows up

$\text{keyCode}$ is deprecated in modern specs, but it’s still present for compatibility. If you’re maintaining older code, this tool helps you map old numbers to modern fields.

Location (left/right/numpad)

$\text{location}$ is especially useful for modifiers and numpad keys. For example, left Shift and right Shift can be distinguished.

Need to test copy/paste friendly outputs while building auth tools? Pair this with the OTP code generator when verifying keyboard-driven OTP input flows.

Frequently asked questions (FAQs)

Should I use key or code for shortcuts?

Use $\text{code}$ when you want the physical key (layout-independent), and $\text{key}$ when you want the typed character (layout-dependent).

Why is keyCode different from what I expected?

$\text{keyCode}$ is legacy and historically inconsistent across browsers. Prefer modern fields in new code.

How do I detect Cmd on macOS vs Ctrl on Windows?

On macOS, check $\text{event.metaKey}$ for Command. On Windows/Linux, check $\text{event.ctrlKey}$ for Control.

Can I distinguish left and right Shift?

Yes. Use $\text{code}=\text{ShiftLeft}/\text{ShiftRight}$ or $\text{location}=1/2$ .

Do mobile keyboards behave the same?

Not always. Some mobile browsers omit certain keys or emit composition events. Use this tool to verify what you actually receive.

Is it safe to share the results?

These values are typically not sensitive, but be cautious if you’re testing in a context where key presses could reveal secrets (for example, passwords). Avoid sharing any private data.

Limitations / disclaimers

Different browsers and operating systems can emit slightly different keyboard values. Hardware (like laptop Fn keys) and input methods (IME, accessibility tools) can also change what events you receive.

This tool is for inspection and debugging only. It does not replace cross-device testing for critical shortcuts.

External references / sources

Related Calculators

Chronometer

Use a simple chronometer (stopwatch) to track elapsed time down to milliseconds. Runs locally in your browser.

Try Now

Email normalizer

Normalize email addresses to a standard format for easier comparison. Useful for deduplication and data cleaning. Runs locally in your browser.

Try Now

ETA calculator

Estimate the time needed to consume a total amount at a constant rate, and get an expected end time. Runs locally in your browser.

Try Now

JWT parser

Parse and decode your JSON Web Token (JWT) and display its content. All computation runs locally in your browser.

Try Now

MIME types

Know which file extensions are associated to a MIME type, and which MIME type is associated to a file extension. Includes a full MIME types table.

Try Now

Lorem ipsum generator

Generate random Lorem Ipsum placeholder text with customizable paragraphs, sentences, and word counts. Runs locally in your browser.

Try Now