JavaScript Keyboard Events
Keyboard Events happen when the user presses a key on the keyboard:
- keydown (key is pressed down)
- keyup (key is released)
- keypress (deprecated)
keypress only fires for character keys (a or 5),
not for control keys (alt or backspace).
Developers are advised to use keydown or keyup instead.
The keydown Event
Using event.key
Example
Show which key was pressed:
<input id="k" type="text" placeholder="Press a key">
<p id="demo"></p>
<script>
const k = document.getElementById("k");
// Let k listen for keydown
k.addEventListener("keydown", function (event) {
// Then display the event.key
document.getElementById("demo").innerHTML = "You pressed: " + event.key;
});
</script>
Try it Yourself »
Key Properties
The KeyboardEvent object provides useful properties to determine which key was involved in the event:
| Property | Description | When pressing Z |
|---|---|---|
| event.key | Returns the value of the key. Can vary based on language settings. |
Returns z (or Z if shift is held) |
| event.code | Returns the key code. Constant, regardless of language settings. |
Always returns "KeyZ" |
You can also detect modifier keys using properties like event.ctrlKey, event.shiftKey, event.altKey, and event.metaKey to implement key combinations (e.g., Ctrl + S).
Detect Enter
Using event.code
<input id="in01" type="text" placeholder="Press Enter">
<p id="demo"></p>
<script>
const in01 = document.getElementById("in01");
// Let in01 listen for keydown
in01.addEventListener("keydown", function (event) {
// If event.code was "enter", then display text
if (event.code === "Enter") {
document.getElementById("demo").innerHTML = "Enter was pressed!";
}
});
</script>
Try it Yourself »
Summary
JavaScript provides keyboard events to detect and handle user input from the keyboard,
enabling interactive web experiences like form validation, game controls, and keyboard shortcuts.
Using event.code
<input id="in01" type="text" placeholder="Press Enter">
<p id="demo"></p>
<script>
const in01 = document.getElementById("in01");
// Let in01 listen for keydown
in01.addEventListener("keydown", function (event) {
// If event.code was "enter", then display text
if (event.code === "Enter") {
document.getElementById("demo").innerHTML = "Enter was pressed!";
}
});
</script>
Try it Yourself »
Summary
JavaScript provides keyboard events to detect and handle user input from the keyboard, enabling interactive web experiences like form validation, game controls, and keyboard shortcuts.
