Keyboard Event Codes - JavaScript Key Event Viewer Online
Press any key to see its JavaScript keyboard event properties in real-time. View event.key, event.code, keyCode, modifier states, and more — 100% client-side, no data sent to server.
Frequently Asked Questions
What is a keyboard event codes viewer?
A keyboard event codes viewer is an online tool that displays all JavaScript KeyboardEvent properties when you press any key on your keyboard. It shows values like event.key (the character or key name), event.code (the physical key identifier), event.keyCode (the numeric code), modifier key states, and more. Developers use this tool to quickly look up the correct event property values when building keyboard interactions, games, accessibility features, or form validation in web applications.
How do I use this keyboard event codes tool?
Click on the capture area at the top of the page and press any key on your keyboard. The tool instantly displays all event properties for that key press, including key, code, keyCode, which, location, and modifier key states. You can switch between keydown, keyup, and keypress event types using the tabs. Use the copy buttons to copy individual values or the full event data as JSON. The event history log below shows your recent key presses for comparison.
Is my data safe? Are my key presses recorded?
All keyboard event capture happens 100% in your browser. No key presses, event data, or any other information is sent to any server. The tool uses native browser KeyboardEvent APIs with no external service calls. Your key presses are only stored temporarily in your browser's memory for the history log and are cleared when you close the page. This tool is safe to use even in security-sensitive environments.
What is the difference between event.key and event.code?
event.key represents the logical value of the key pressed, which changes based on the keyboard layout and modifier keys. For example, pressing the 'A' key gives key: 'a' normally or key: 'A' with Shift held. event.code represents the physical key position on the keyboard, regardless of layout or modifiers. The same physical key always returns code: 'KeyA' whether you press it with Shift, on a QWERTY layout, or on an AZERTY layout. Use event.key for text input handling and event.code for game controls or layout-independent actions.
Why are keyCode, which, and charCode deprecated?
These properties are deprecated because they are inconsistent across browsers and keyboard layouts. event.keyCode returns different numeric values for the same key on different operating systems, and event.charCode is only available in keypress events (which is itself deprecated). The modern replacements are event.key (for the character value) and event.code (for the physical key). All modern browsers support these newer properties, and they provide consistent, predictable values across platforms.
What does event.location tell me?
event.location indicates where the key is located on the keyboard. It returns a number: 0 (Standard) for most keys, 1 (Left) for left-side modifier keys like Left Shift or Left Ctrl, 2 (Right) for right-side modifiers like Right Shift or Right Ctrl, and 3 (Numpad) for keys on the numeric keypad. This is useful when you need to distinguish between the left and right Shift keys, or between the main Enter key and the numpad Enter key.
What is the difference between keydown and keyup events?
keydown fires the moment a key is pressed down and continues firing repeatedly if the key is held (with event.repeat set to true). keyup fires once when the key is released. The deprecated keypress event fires between keydown and keyup but only for keys that produce a character value (not for Shift, Ctrl, Arrow keys, etc.). For most use cases, keydown is the recommended event to listen for.
Code Examples
// Keyboard Event Handling in JavaScript
// Basic keydown event listener
document.addEventListener('keydown', (event) => {
console.log('key:', event.key); // "a", "Enter", "Shift"
console.log('code:', event.code); // "KeyA", "Enter", "ShiftLeft"
console.log('keyCode:', event.keyCode); // 65, 13, 16 (deprecated)
console.log('location:', event.location); // 0, 0, 1
// Modifier key states
console.log('shiftKey:', event.shiftKey);
console.log('ctrlKey:', event.ctrlKey);
console.log('altKey:', event.altKey);
console.log('metaKey:', event.metaKey);
console.log('repeat:', event.repeat);
});
// Using event.code for layout-independent controls (e.g., WASD)
document.addEventListener('keydown', (event) => {
switch (event.code) {
case 'KeyW': moveForward(); break;
case 'KeyA': moveLeft(); break;
case 'KeyS': moveBackward(); break;
case 'KeyD': moveRight(); break;
case 'Space': jump(); break;
}
});
// Detecting modifier combinations
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
saveDocument();
}
if (event.metaKey && event.key === 'k') {
event.preventDefault();
openCommandPalette();
}
});
// Extracting full event data as an object
function extractKeyEventData(event) {
return {
type: event.type,
key: event.key,
code: event.code,
keyCode: event.keyCode,
which: event.which,
charCode: event.charCode,
location: event.location,
repeat: event.repeat,
isComposing: event.isComposing,
shiftKey: event.shiftKey,
ctrlKey: event.ctrlKey,
altKey: event.altKey,
metaKey: event.metaKey,
};
}
document.addEventListener('keydown', (event) => {
const data = extractKeyEventData(event);
console.log(JSON.stringify(data, null, 2));
});