Keyboard Events happen when the user presses a key on the keyboard:
- keydown (key is pressed down)
- keyup (key is released)
- keypress (deprecated)
Note:
keypressonly fires for character keys (a or 5), not for control keys (alt or backspace). Developers are advised to usekeydownorkeyupinstead.
The keydown Event
Using event.key
Example
<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>
Key Properties
The KeyboardEvent object provides useful properties to determine which key was involved in the event:
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| 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" |
Note: 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
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.