JavaScript Keycode Finder

How to Use the JavaScript Keycode Finder

The JavaScript Keycode Finder is an interactive tool that displays detailed keyboard event information when you press any key. It shows the key, code, keyCode, which, and location properties — everything you need when building keyboard shortcuts, game controls, or accessible web applications.

Step-by-Step

Focus the key capture area — Click on the large key capture zone in the center of the tool.

Press any key — Hit any key on your keyboard, including modifiers (Shift, Ctrl, Alt, Meta), function keys, or special keys.

Read the event data — Instantly see all keyboard event properties displayed in a clean, organized table.

View modifier state — Check which modifier keys were held during the keypress (Shift, Control, Alt, Meta).

Copy values — Click any value to copy it to your clipboard for use in your JavaScript event handlers.

Features

Complete Event Properties — Displays event.key, event.code, event.keyCode, event.which, event.location, and event.type for every keypress.

Modifier Key Detection — Shows the state of shiftKey, ctrlKey, altKey, and metaKey modifiers during each event.

Key History — Maintains a scrollable history of recently pressed keys so you can compare values across different keys.

Event Type Toggle — Switch between keydown, keyup, and keypress events to see how values differ across event types.

Deprecation Warnings — Highlights deprecated properties like keyCode and which with notes about modern alternatives.

Visual Key Display — Shows a large, styled representation of the pressed key for clear visual feedback.

Common Use Cases

Building Keyboard Shortcuts — Determine the exact event.key and event.code values to use in your shortcut handler code.

Game Development — Map physical key positions using event.code for WASD controls that work regardless of keyboard layout.

Accessibility Development — Test keyboard navigation and verify that your application responds correctly to all expected key inputs.

Cross-Browser Testing — Compare keyCode values across browsers to handle inconsistencies in legacy keyboard event handling.

Documentation — Look up the exact string values returned by keyboard events for keys you rarely use (PrintScreen, NumLock, etc.).

Why Use This Tool

Keyboard event handling is one of the most common tasks in frontend development, yet the API is surprisingly inconsistent across browsers and keyboard layouts. The keyCode and which properties are deprecated but still widely used. This tool gives you a live reference for the modern key and code properties alongside the legacy values, so you can write keyboard handlers that work everywhere. No need to add temporary console.log statements — just press keys and copy values.