JavaScript Keycode Reference: Key Finder Tool & Complete Guide
By
Liz Fujiwara
•
Dec 9, 2025
Keyboard interactions form the backbone of modern web applications, yet many developers still rely on outdated approaches that create compatibility issues and accessibility barriers. Whether you’re a startup founder building your first web platform, a CTO scaling development processes, or a technical hiring manager evaluating frontend skills, understanding JavaScript keyboard event handling is crucial for delivering responsive user experiences.
The landscape of keyboard event handling has evolved significantly since the early days of web development. While the deprecated keyCode property dominated JavaScript development for years, modern web standards now provide more reliable alternatives that work consistently across browsers and operating systems. This guide will walk you through everything from legacy keycode values to modern best practices, complete with an interactive key finder tool and practical implementation examples.
Key Takeaways
JavaScript’s keyCode property is deprecated; modern alternatives like key and code provide better cross-browser compatibility and accessibility.
Understanding modern keyboard event handling is essential for building responsive, accessible web applications and is a fundamental frontend development skill.
Proper keyboard event handling directly impacts user experience, accessibility compliance, and application performance across all browsers and devices.
What are JavaScript Keycodes
JavaScript keycodes are numeric values that represent specific keys pressed on a keyboard within browser events. When a user interacts with your web application through keyboard input, the browser generates events containing these numerical identifiers to help your code determine which key was pressed.
The keyCode property emerged as part of the original KeyboardEvent API, providing a way for developers to detect and respond to keyboard input. For example, pressing the “A” key traditionally generated a keycode value of 65, while the Escape key produced a keycode of 27. This system allowed developers to create keyboard shortcuts, handle form navigation, and implement complex user interface interactions.
However, understanding the distinction between different keyboard event properties is essential for modern development. The keyCode property specifically refers to the deprecated numeric identifier, while newer properties like key and code provide more reliable and descriptive alternatives. The key property returns actual character values like “Enter” or “Escape,” while the code property identifies the physical key location regardless of keyboard layout.
Why do keycodes matter for web applications and user interface development? They enable essential functionality like keyboard shortcuts that power productivity applications, accessibility features for users who cannot use a mouse, and responsive controls in interactive web applications. Understanding keyboard event handling helps technical teams build applications that feel native and responsive across different platforms and user preferences.
Modern KeyboardEvent Properties vs Deprecated Keycodes
The web development community has largely moved away from the deprecated keyCode property in favor of more reliable alternatives. The KeyboardEvent.key property serves as the modern standard, returning string values that clearly identify which key was pressed without requiring developers to memorize numeric codes.
When a user presses the Enter key, the modern key property returns the descriptive string “Enter,” while the Tab key returns “Tab” and the Escape key returns “Escape.” This approach eliminates confusion and makes code more readable and maintainable. The Shift key, Control key, and Command key on Mac systems all return clear, descriptive names rather than numeric values.
The KeyboardEvent.code property takes a different approach by identifying the physical key location on the keyboard. This property is particularly valuable when developing applications that need to work consistently across different keyboard layouts. For instance, pressing the “Q” key on a QWERTY keyboard returns KeyQ, while pressing the same physical key position on an AZERTY layout still returns KeyQ even though the character output differs.
The keyCode, which, and charCode properties were officially deprecated in 2017 as web standards evolved toward more descriptive and reliable alternatives. Modern browsers continue to support these properties for backward compatibility, but developers should avoid using them in new projects. Browser support for the modern properties is strong, with the key property supported in all current browsers and the code property available since Internet Explorer 9.
Here’s a comparison showing the evolution from deprecated to modern approaches:
// Deprecated approach
document.addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
console.log('Enter key pressed');
}
});
// Modern approach
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
console.log('Enter key pressed');
}
});
Migration to modern properties requires updating existing code to use descriptive string values instead of numeric keycodes. This transition improves code readability and eliminates the need to reference keycode lookup tables during development.
Browser Compatibility and Cross-Platform Issues
Understanding browser compatibility remains crucial for teams developing applications that must work reliably across different platforms and browsers. While modern browsers have largely standardized keyboard event handling, differences still persist between Internet Explorer, Chrome, Firefox, and other browsers, particularly when dealing with special keys and international keyboards.
Internet Explorer implementations often differed from other browsers in how they handled certain key combinations and special characters. Chrome and Firefox generally provide consistent behavior, but subtle differences can emerge when handling the numeric keypad, function keys, or non-English keyboard layouts. These variations require careful testing and sometimes browser-specific code paths.
Windows systems present challenges with the AltGraph key, commonly found on European keyboards. When users press AltGraph to access special characters, Windows triggers both ControlLeft and AltRight events simultaneously. This behavior can cause unexpected results in applications that listen for control key combinations, requiring developers to implement special handling logic.
Mac keyboard differences add another layer of complexity, particularly around the NumLock/Clear key functionality. On Mac systems, the key that serves as NumLock on PC keyboards functions as a Clear key with different behavior. Additionally, the Command key on Mac keyboards requires different event handling than the Control key on Windows systems.
Mobile and virtual keyboard implementations introduce their own limitations. Most mobile browsers return a keycode of 229 when users interact with Input Method Editor (IME) systems for languages like Japanese, Chinese, or Korean. This limitation makes it difficult to detect specific keystrokes during complex text input processes.
Japanese keyboard layouts present additional challenges, as the CapsLock key often functions as an Alphanumeric key with varying keycode values depending on the specific keyboard model and browser implementation. These variations highlight the importance of testing across different hardware configurations and cultural contexts.
Complete Keycode Reference Tables
Understanding the complete range of keycode values helps developers implement comprehensive keyboard handling. The following reference tables provide quick lookup for common keys and their corresponding numeric values, though remember these are deprecated in favor of modern alternatives.
Printable Keys (32-126)
Key | Keycode | Key | Keycode | Key | Keycode | Key | Keycode |
Space | 32 | 0 | 48 | @ | 64 | ` | 96 |
! | 33 | 1 | 49 | A | 65 | a | 97 |
“ | 34 | 2 | 50 | B | 66 | b | 98 |
# | 35 | 3 | 51 | C | 67 | c | 99 |
$ | 36 | 4 | 52 | D | 68 | d | 100 |
% | 37 | 5 | 53 | E | 69 | e | 101 |
& | 38 | 6 | 54 | F | 70 | f | 102 |
‘ | 39 | 7 | 55 | G | 71 | g | 103 |
( | 40 | 8 | 56 | H | 72 | h | 104 |
) | 41 | 9 | 57 | semicolon | 59 | underscore | 95 |
Function and Special Keys
Key | Keycode | Description |
Tab | 9 | Tab key for navigation |
Enter | 13 | Return key |
Shift | 16 | Left or right shift key |
Control | 17 | Control key |
Alt | 18 | Alt key |
Pause | 19 | Pause/Break key |
CapsLock | 20 | Caps Lock key |
Escape | 27 | Escape key |
Page Up | 33 | Page up key |
Page Down | 34 | Page down key |
End | 35 | End key |
Home | 36 | Home key |
Arrow Keys
Key | Keycode |
Left Arrow | 37 |
Up Arrow | 38 |
Right Arrow | 39 |
Down Arrow | 40 |
Function Keys (F1-F12)
Key | Keycode | Key | Keycode |
F1 | 112 | F7 | 118 |
F2 | 113 | F8 | 119 |
F3 | 114 | F9 | 120 |
F4 | 115 | F10 | 121 |
F5 | 116 | F11 | 122 |
F6 | 117 | F12 | 123 |
Numeric Keypad
Key | Keycode |
Numpad 0 | 96 |
Numpad 1 | 97 |
Numpad 2 | 98 |
Numpad 3 | 99 |
Numpad 4 | 100 |
Numpad 5 | 101 |
Numpad 6 | 102 |
Numpad 7 | 103 |
Numpad 8 | 104 |
Numpad 9 | 105 |
Additional numeric keypad keys include multiply (*) at 106, plus (+) at 107, minus (-) at 109, period (.) at 110, and divide (/) at 111. The NumLock key corresponds to keycode 144, while the Scroll Lock key uses keycode 145.
Interactive Key Finder Tool
Testing keyboard events in real time provides valuable insight for developers implementing keyboard interactions. An interactive key finder tool allows you to press any key and immediately see all associated event properties, including the deprecated keycode values and modern alternatives.
The tool captures keydown, keypress, and keyup events simultaneously, displaying information about each keystroke. When you press a key, the tool shows the event type, the key property value, the code property value, the deprecated keyCode and which properties, along with any modifier key states.
<div id="keyFinder">
<h3>Press any key to test:</h3>
<div id="output">
<p><strong>Event Type:</strong> <span id="eventType">-</span></p>
<p><strong>Key:</strong> <span id="keyValue">-</span></p>
<p><strong>Code:</strong> <span id="codeValue">-</span></p>
<p><strong>KeyCode:</strong> <span id="keyCode">-</span></p>
<p><strong>Which:</strong> <span id="which">-</span></p>
<p><strong>Shift:</strong> <span id="shiftKey">-</span></p>
<p><strong>Ctrl:</strong> <span id="ctrlKey">-</span></p>
<p><strong>Alt:</strong> <span id="altKey">-</span></p>
</div>
<button id="copyButton">Copy Event Data</button>
</div>
<script>
document.addEventListener('keydown', function(event) {
updateDisplay(event, 'keydown');
});
function updateDisplay(event, eventType) {
document.getElementById('eventType').textContent = eventType;
document.getElementById('keyValue').textContent = event.key;
document.getElementById('codeValue').textContent = event.code;
document.getElementById('keyCode').textContent = event.keyCode;
document.getElementById('which').textContent = event.which;
document.getElementById('shiftKey').textContent = event.shiftKey;
document.getElementById('ctrlKey').textContent = event.ctrlKey;
document.getElementById('altKey').textContent = event.altKey;
}
</script>
The copy-to-clipboard functionality enables quick transfer of event data into your development environment for immediate implementation. Console logging provides additional detail for complex debugging scenarios, particularly when working with international character input or testing modifier key combinations.
How to Use the Key Finder
Begin by focusing on the key finder interface, then press any key you want to test. The tool immediately updates to show all relevant event properties, making it easy to understand how different browsers handle specific keys. This real time feedback proves particularly valuable when testing special keys like the Backspace key, Delete key, or various arrow key combinations.
For testing special character input methods, try using Alt codes or Unicode input techniques while monitoring the event stream. The tool captures these complex input sequences, showing how browsers handle multi-step character composition processes.
Copy the displayed values directly into your JavaScript code for immediate implementation. The tool formats output in a way that makes it easy to paste into event handler functions or conditional statements. Testing modifier key combinations reveals how the Shift key, Control key, and Alt key interact with other keypresses, providing insight for implementing keyboard shortcuts.
Practical Implementation Examples
Modern keyboard event handling requires understanding both legacy browser support and current best practices. The following examples demonstrate how to implement robust keyboard interactions that work across different platforms and browsers.
Basic event listener setup should prioritize the modern key property while providing fallbacks for older browsers:
function setupKeyboardListener() {
document.addEventListener('keydown', function(event) {
// Modern approach
if (event.key === 'Enter' || event.key === 'Return') {
handleEnterKey(event);
} else if (event.key === 'Escape') {
handleEscapeKey(event);
} else if (event.key === 'Tab') {
handleTabNavigation(event);
}
// Fallback for older browsers
if (!event.key) {
switch (event.keyCode) {
case 13: handleEnterKey(event); break;
case 27: handleEscapeKey(event); break;
case 9: handleTabNavigation(event); break;
}
}
});
}
Creating keyboard shortcuts requires careful handling of modifier keys and cross-platform compatibility:
function createKeyboardShortcuts() {
document.addEventListener('keydown', function(event) {
// Handle Ctrl+S (or Cmd+S on Mac)
if ((event.ctrlKey || event.metaKey) && event.key === 's') {
event.preventDefault();
saveDocument();
return;
}
// Handle Ctrl+C for custom copy behavior
if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
handleCustomCopy(event);
}
// Handle arrow key navigation
switch (event.key) {
case 'ArrowUp':
navigateUp();
break;
case 'ArrowDown':
navigateDown();
break;
case 'ArrowLeft':
navigateLeft();
break;
case 'ArrowRight':
navigateRight();
break;
}
});
}
Handling international keyboards and special characters requires awareness of different input methods and unicode character handling:
function handleInternationalInput() {
document.addEventListener('keydown', function(event) {
// Check for IME input (common on mobile and international keyboards)
if (event.keyCode === 229) {
console.log('IME composition in progress');
return;
}
// Handle dead keys and composed characters
if (event.key.length > 1 && event.key !== 'Dead') {
processSpecialKey(event.key);
}
});
// Use input event for composed character handling
document.addEventListener('input', function(event) {
processActualInput(event.target.value);
});
}
Cross-browser compatible event handling functions should account for the differences between browsers while maintaining clean, readable code:
function createCrossBrowserHandler() {
return function(event) {
// Normalize event object
event = event || window.event;
// Get key information with fallbacks
const key = event.key ||
String.fromCharCode(event.keyCode || event.which);
const keyCode = event.keyCode || event.which;
// Normalize modifier keys
const ctrl = event.ctrlKey;
const alt = event.altKey;
const shift = event.shiftKey;
const meta = event.metaKey || false;
return {
key: key,
keyCode: keyCode,
ctrl: ctrl,
alt: alt,
shift: shift,
meta: meta,
originalEvent: event
};
};
}
Form navigation and accessibility considerations require implementing proper focus management and ensuring keyboard-only users can navigate effectively:
function setupAccessibleNavigation() {
// Handle form field navigation
document.addEventListener('keydown', function(event) {
if (event.key === 'Tab') {
// Let browser handle default tab behavior
return;
}
if (event.key === 'Enter' && event.target.type === 'submit') {
// Submit form on enter from submit button
event.target.form.submit();
}
// Handle escape to close modals or cancel operations
if (event.key === 'Escape') {
closeModal();
}
});
// Ensure focus management for dynamic content
function trapFocus(container) {
const focusableElements = container.querySelectorAll(
'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
);
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
container.addEventListener('keydown', function(event) {
if (event.key === 'Tab') {
if (event.shiftKey && document.activeElement === firstElement) {
event.preventDefault();
lastElement.focus();
} else if (!event.shiftKey && document.activeElement === lastElement) {
event.preventDefault();
firstElement.focus();
}
}
});
}
}
Best Practices for Modern JavaScript Development
Modern JavaScript development demands a thoughtful approach to keyboard event handling that prioritizes user experience, accessibility, and cross-platform compatibility. Following established best practices ensures your applications work reliably for all users while maintaining clean, maintainable code.
Use KeyboardEvent.key instead of the deprecated keycode whenever possible. The key property provides descriptive string values that make code more readable and eliminate the need for developers to memorize numeric lookup tables. This approach also handles international characters and special keys more reliably across different keyboard layouts and operating systems.
Implement fallbacks for older browser support when your user base includes legacy browser versions. While modern browsers universally support the key property, some enterprise environments still rely on older browsers that require keycode fallbacks. Creating a thin abstraction layer helps maintain compatibility without cluttering your primary event handling logic.
Consider accessibility guidelines when implementing keyboard navigation. Users with motor disabilities often rely entirely on keyboard navigation, making strong keyboard support essential rather than optional. Ensure all interactive elements are reachable via keyboard, provide clear focus indicators, and implement logical tab order throughout your interface.
Test across different operating systems and keyboard layouts to identify potential issues before they reach production. Windows, Mac, and Linux systems handle certain key combinations differently, particularly modifier keys and special characters. International keyboard layouts can produce unexpected results if your application assumes a QWERTY layout.
Handle edge cases like virtual keyboards and mobile input gracefully. Mobile browsers often return limited keycode information, and virtual keyboards may not trigger standard key events for all interactions. The keypress event, while useful for character input, doesn’t fire for non-printable keys like arrow keys or function keys.
// Best practice: Modern event handling with fallbacks
function handleKeyboardInput(event) {
// Use modern properties first
const key = event.key;
const code = event.code;
// Fallback for older browsers
const keyCode = event.keyCode || event.which;
// Handle modern browsers
if (key) {
switch (key) {
case 'Enter':
handleEnter();
break;
case 'Escape':
handleEscape();
break;
case 'ArrowUp':
handleUpArrow();
break;
}
} else if (keyCode) {
// Legacy support
switch (keyCode) {
case 13: handleEnter(); break;
case 27: handleEscape(); break;
case 38: handleUpArrow(); break;
}
}
}
Performance considerations become important in applications with frequent keyboard interactions. Avoid creating new event listeners inside render loops, debounce rapid keydown events when appropriate, and use event delegation for dynamic content to minimize memory usage.
Security awareness is crucial when handling keyboard input, particularly in applications that process sensitive data. Key logging concerns require careful consideration of what keyboard events you capture and log. Never log actual keystrokes for password fields or other sensitive inputs, and be aware that some browser extensions may monitor keyboard events.
Popular JavaScript Libraries for Keyboard Handling
Several well-established libraries can simplify complex keyboard handling scenarios, particularly for applications requiring shortcut systems or cross-browser compatibility. Understanding the strengths and tradeoffs of popular options helps technical teams make informed decisions about when to use libraries versus native JavaScript implementation.
Hotkeys.js provides a lightweight solution focused specifically on keyboard shortcuts. The library offers a simple API for binding key combinations and handles cross-browser compatibility automatically. With a small bundle size of approximately 4KB, Hotkeys.js works well for applications that need basic shortcut functionality without additional overhead.
// Hotkeys.js example
hotkeys('ctrl+s,⌘+s', function(event, handler) {
event.preventDefault();
saveDocument();
});
hotkeys('up,down,left,right', function(event, handler) {
switch(handler.key) {
case 'up': moveUp(); break;
case 'down': moveDown(); break;
case 'left': moveLeft(); break;
case 'right': moveRight(); break;
}
});
Mousetrap offers advanced keyboard shortcut management with support for complex key sequences and combinations. The library handles edge cases like preventing default browser behavior, managing focus, and supporting both keydown and keyup events. Mousetrap’s API allows for detailed shortcut systems similar to those found in desktop applications.
// Mousetrap example
Mousetrap.bind('4', function() { console.log('4'); });
Mousetrap.bind('?', function() { showHelp(); });
Mousetrap.bind('esc', function() { closeDialog(); }, 'keyup');
// Sequence shortcuts
Mousetrap.bind('g i', function() { goToInbox(); });
Mousetrap.bind(['ctrl+k', 'meta+k'], function() { showSearch(); });
KeyboardJS specializes in complex key combination handling and provides detailed control over key events. The library distinguishes between different types of key events and allows for scenarios like detecting when keys are held down or released in specific sequences.
The choice between libraries and native implementation depends on your application’s complexity and requirements. Simple applications with basic keyboard handling often work better with native JavaScript to avoid additional dependencies. Complex applications with extensive shortcut systems benefit from libraries that handle edge cases and provide consistent cross-browser behavior.
Consider bundle size impact when evaluating keyboard libraries. While a 4 KB library might seem negligible, every dependency contributes to your application’s load time and complexity. Modern bundlers can tree-shake unused features, but the base library size still affects initial page load performance.
Browser support requirements influence library selection. Applications targeting modern browsers can often rely on native KeyboardEvent properties, while applications supporting Internet Explorer or older mobile browsers benefit from libraries that provide fallbacks.
Modern development teams face increasing pressure to deliver sophisticated user interfaces while maintaining code quality and development velocity. An AI-powered development assistant can help startup founders, CTOs, and technical teams streamline their JavaScript development workflows and build better keyboard interaction systems.
An intelligent assistant can understand the complexities of modern web development and provide support for implementing strong keyboard event handling. Rather than requiring developers to memorize keycode values or research cross-browser compatibility issues, such tools can generate complete, tested keyboard interaction code that follows current best practices and handles edge cases automatically.
For startup founders building their first web platforms, an AI assistant reduces the learning curve around complex keyboard event handling. It can translate high-level requirements like “implement Ctrl+S to save” or “add arrow key navigation” into production-ready JavaScript code that works consistently across browsers and platforms.
CTOs managing development teams benefit from tools that generate standardized code patterns that reduce technical debt and improve maintainability. When scaling development processes, consistent keyboard handling approaches across different team members and projects become important for long-term success. These tools help establish and maintain such standards automatically.
Technical hiring managers can leverage this type of assistant to evaluate frontend developer skills more effectively. Understanding how candidates approach keyboard event handling reveals their grasp of user experience principles, browser compatibility concerns, and modern JavaScript development practices. AI tools can generate test scenarios and evaluation criteria that help assess these skills objectively.
AI team leads working on applications that require detailed user interactions find these assistants valuable for implementing accessible and responsive keyboard controls. They can understand accessibility guidelines and generate code that supports users who rely on keyboard navigation while maintaining performance.
// Example of Fonzi-generated keyboard handling code
class KeyboardManager {
constructor(options = {}) {
this.shortcuts = new Map();
this.options = {
preventDefault: true,
stopPropagation: false,
...options
};
this.init();
}
init() {
document.addEventListener('keydown', this.handleKeydown.bind(this));
}
register(shortcut, callback, options = {}) {
const normalizedShortcut = this.normalizeShortcut(shortcut);
this.shortcuts.set(normalizedShortcut, { callback, options });
}
normalizeShortcut(shortcut) {
return shortcut.toLowerCase()
.replace(/\s+/g, '')
.replace(/cmd|meta/g, 'meta')
.replace(/ctrl/g, 'control');
}
handleKeydown(event) {
const shortcut = this.buildShortcutString(event);
const handler = this.shortcuts.get(shortcut);
if (handler) {
if (this.options.preventDefault || handler.options.preventDefault) {
event.preventDefault();
}
if (this.options.stopPropagation || handler.options.stopPropagation) {
event.stopPropagation();
}
handler.callback(event);
}
}
buildShortcutString(event) {
const parts = [];
if (event.ctrlKey) parts.push('control');
if (event.altKey) parts.push('alt');
if (event.shiftKey) parts.push('shift');
if (event.metaKey) parts.push('meta');
const key = event.key.toLowerCase();
if (key !== 'control' && key !== 'alt' && key !== 'shift' && key !== 'meta') {
parts.push(key);
}
return parts.join('+');
}
}
Conclusion
JavaScript keyboard event handling has evolved from memorizing numeric keycodes to using modern, descriptive properties like key and code. This shift reflects the web platform's maturation toward more accessible, international-friendly development practices that work reliably across browsers and platforms.
Understanding keyboard event handling is more than just a technical skill as it's a fundamental indicator of JavaScript proficiency and user experience awareness. The practical examples and reference materials in this guide provide immediate value for building keyboard-driven features, from simple form navigation to complex application shortcuts.
As web applications grow more sophisticated, keyboard interaction becomes essential for both usability and accessibility. By balancing modern best practices with practical compatibility requirements and keeping user needs central to technical decisions, development teams can create applications that serve broader audiences and deliver better experiences for users with diverse input preferences and accessibility needs.
