Press any key on your keyboard to see its event properties
| Key | event.code | event.keyCode | Category |
|---|
What it is: The actual character or key name that was pressed, considering the keyboard layout and any modifiers.
Examples:
"a" / "A" (character)"Enter", "Escape" (key names)"ArrowUp" (arrow)" " (space)Use for: Detecting actual character input, handling shortcuts like Ctrl+S
What it is: The physical location of the key on the keyboard, independent of layout and modifiers.
Examples:
"KeyA" (physical position)"Enter", "Escape""ArrowUp""Space"Use for: Game controls, key position detection
What it is: Numeric code for the key. Still works but shouldn't be used for new code.
Examples:
65 for A/a13 for Enter27 for EscapeUse for: Legacy code only. Use event.key or event.code instead.
event.key changes based on keyboard layout:
Implication: Use event.code for games, event.key for text input.
document.addEventListener('keydown', (event) => {
console.log('Key:', event.key);
console.log('Code:', event.code);
console.log('KeyCode:', event.keyCode);
});
// For keyup event
document.addEventListener('keyup', (event) => {
console.log('Key released:', event.key);
});
document.addEventListener('keydown', (event) => {
// Detect Ctrl+S
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
console.log('Save shortcut pressed!');
}
// Detect Shift+Enter
if (event.shiftKey && event.key === 'Enter') {
console.log('Shift+Enter pressed!');
}
// Detect Alt+Ctrl+K
if (event.altKey && event.ctrlKey && event.key === 'k') {
console.log('Alt+Ctrl+K pressed!');
}
});
// Check all modifiers
if (event.ctrlKey) console.log('Ctrl is pressed');
if (event.shiftKey) console.log('Shift is pressed');
if (event.altKey) console.log('Alt is pressed');
if (event.metaKey) console.log('Meta/Cmd is pressed');
const keys = {};
document.addEventListener('keydown', (event) => {
keys[event.code] = true;
});
document.addEventListener('keyup', (event) => {
keys[event.code] = false;
});
// Check multiple keys at once
function updateGameState() {
if (keys['KeyW']) console.log('Moving forward');
if (keys['KeyA']) console.log('Moving left');
if (keys['KeyS']) console.log('Moving backward');
if (keys['KeyD']) console.log('Moving right');
if (keys['Space']) console.log('Jumping');
}
// Call in your game loop
setInterval(updateGameState, 16); // ~60 FPS
class KeyboardShortcuts {
constructor() {
this.shortcuts = new Map();
document.addEventListener('keydown', (e) => this.handle(e));
}
register(combo, callback) {
this.shortcuts.set(combo, callback);
}
handle(event) {
const mods = [
event.ctrlKey ? 'ctrl' : '',
event.shiftKey ? 'shift' : '',
event.altKey ? 'alt' : '',
event.metaKey ? 'meta' : ''
].filter(Boolean);
const combo = [...mods, event.key].join('+');
if (this.shortcuts.has(combo)) {
event.preventDefault();
this.shortcuts.get(combo)();
}
}
}
// Usage
const shortcuts = new KeyboardShortcuts();
shortcuts.register('ctrl+s', () => console.log('Save'));
shortcuts.register('ctrl+shift+s', () => console.log('Save As'));
shortcuts.register('ctrl+z', () => console.log('Undo'));
document.addEventListener('keydown', (event) => {
// Arrow keys
if (event.key === 'ArrowUp') console.log('Up arrow');
if (event.key === 'ArrowDown') console.log('Down arrow');
if (event.key === 'ArrowLeft') console.log('Left arrow');
if (event.key === 'ArrowRight') console.log('Right arrow');
// Special keys
if (event.key === 'Enter') console.log('Enter key');
if (event.key === 'Escape') console.log('Escape key');
if (event.key === 'Tab') console.log('Tab key');
if (event.key === ' ') console.log('Space key');
if (event.key === 'Backspace') console.log('Backspace key');
if (event.key === 'Delete') console.log('Delete key');
// Function keys
if (event.key === 'F1') console.log('F1 pressed');
if (event.key === 'F12') console.log('F12 pressed');
});