JavaScript Keyboard Events
Keyboard events let you respond to key presses and releases. They are essential for text input handling, keyboard shortcuts, game controls, and accessibility. The two main events are keydown and keyup.
keydown and keyup
keydown fires when a key is pressed (and repeats if the key is held). keyup fires once when the key is released. The deprecated keypress event should no longer be used.
document.addEventListener("keydown", (e) => {
console.log("keydown — key:", e.key, "| code:", e.code);
});
document.addEventListener("keyup", (e) => {
console.log("keyup — key:", e.key, "| code:", e.code);
});
// Pressing 'a' logs:
// keydown — key: a | code: KeyA
// keyup — key: a | code: KeyAevent.key vs event.code
event.key returns the character value of the key (affected by layout and modifiers), while event.code returns the physical key identifier (not affected by keyboard layout). Use key for character input and code for physical position (e.g. games, shortcuts).
| Property | Value for 'A' key | Affected by Layout? | Best For |
|---|---|---|---|
| event.key | "a" or "A" (with Shift) | Yes | Character input, text fields |
| event.code | "KeyA" (always) | No | Physical key position, games, shortcuts |
document.addEventListener("keydown", (e) => {
console.log("key:", e.key); // 'a', 'A', 'Enter', 'Shift', etc.
console.log("code:", e.code); // 'KeyA', 'Enter', 'ShiftLeft', etc.
// key changes with Shift; code does not
// Pressing Shift + A:
// key: A
// code: KeyA
});Modifier Keys
The event object has boolean properties that indicate whether modifier keys were held during the key press: altKey, ctrlKey, shiftKey, and metaKey (Cmd on Mac, Windows key on PC).
document.addEventListener("keydown", (e) => {
console.log("Key:", e.key);
console.log("Shift:", e.shiftKey);
console.log("Ctrl:", e.ctrlKey);
console.log("Alt:", e.altKey);
console.log("Meta:", e.metaKey);
// Detect Ctrl+Shift+S
if (e.ctrlKey && e.shiftKey && e.key === "S") {
console.log("Ctrl+Shift+S pressed!");
}
});Preventing Default Behavior
Some keys trigger browser actions (e.g. F5 refreshes, Ctrl+P opens print). Call e.preventDefault() to stop the default behavior and handle the key yourself.
// Prevent form submission on Enter
const input = document.getElementById("search");
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
e.preventDefault();
console.log("Enter blocked — performing custom search");
console.log("Search term:", input.value);
}
});
// Prevent Ctrl+S from opening Save dialog
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "s") {
e.preventDefault();
console.log("Custom save triggered!");
}
});Keyboard Shortcuts
Combining modifier checks with key/code checks lets you build custom keyboard shortcuts. Always use event.key for printable characters and event.code for non-character keys or layout-independent shortcuts.
const shortcuts = {
"ctrl+n": () => console.log("New document"),
"ctrl+o": () => console.log("Open file"),
"ctrl+shift+p": () => console.log("Command palette"),
"escape": () => console.log("Close dialog")
};
document.addEventListener("keydown", (e) => {
const parts = [];
if (e.ctrlKey) parts.push("ctrl");
if (e.shiftKey) parts.push("shift");
if (e.altKey) parts.push("alt");
parts.push(e.key.toLowerCase());
const combo = parts.join("+");
console.log("Combo:", combo);
if (shortcuts[combo]) {
e.preventDefault();
shortcuts[combo]();
}
});
// Pressing Ctrl+N logs: Combo: ctrl+n / New document| Common key Values | Description |
|---|---|
| "Enter" | The Enter/Return key |
| "Escape" | The Escape key |
| "ArrowUp" | Up arrow key |
| "ArrowDown" | Down arrow key |
| "ArrowLeft" | Left arrow key |
| "ArrowRight" | Right arrow key |
| "Tab" | The Tab key |
| "Backspace" | The Backspace key |
| "Delete" | The Delete key |
| " " | The Space bar (literal space) |