Keyboard events in HTML and JavaScript allow webpages to respond when users press or release keys on a keyboard. They are useful for handling text input, detecting shortcuts, navigating interactive interfaces, and creating keyboard-controlled features.
Understanding keyboard events is an important part of JavaScript development because they help make websites more interactive and accessible to users who rely on a keyboard.
What Are Keyboard Events?
Keyboard events are browser events triggered by keyboard actions. JavaScript can detect these events and run a function when a key is pressed or released.
For example, the keydown event occurs when a key is pressed.
<input type="text" id="nameInput" placeholder="Type something">
<p id="message"></p>
<script>
const input = document.getElementById("nameInput");
const message = document.getElementById("message");
input.addEventListener("keydown", function(event) {
message.textContent = "You pressed: " + event.key;
});
</script>When you press a key while the input field is focused, JavaScript displays the key’s value in the paragraph.
To understand how JavaScript responds to user actions, read our guide to HTML events.
Common Keyboard Events in JavaScript
JavaScript provides two primary keyboard events used in modern web development.
| Event | Description |
|---|---|
keydown | Occurs when a key is pressed |
keyup | Occurs when a key is released |
The older keypress event is deprecated and should generally not be used in new projects.
Keyboard events provide information through an event object, including the key involved and whether modifier keys such as Shift, Ctrl, Alt, or Meta were pressed.
Keydown Event Example
The keydown event runs when a user presses a key while an element that can receive keyboard input is focused.
<input type="text" id="username" placeholder="Enter your name">
<p id="result"></p>
<script>
const username = document.getElementById("username");
const result = document.getElementById("result");
username.addEventListener("keydown", function(event) {
result.textContent = "Key pressed: " + event.key;
});
</script>For example, pressing the letter A displays Key pressed: a or Key pressed: A, depending on the keyboard state.
This event is useful when an application needs to respond immediately to key presses.
Keyup Event Example
The keyup event occurs when a user releases a key. It is useful when you want to respond after a key has been released.
<input type="text" id="searchInput" placeholder="Type a search term">
<p id="output"></p>
<script>
const searchInput = document.getElementById("searchInput");
const output = document.getElementById("output");
searchInput.addEventListener("keyup", function() {
output.textContent = "Current text: " + searchInput.value;
});
</script>As the user types and releases keys, the paragraph displays the current input value.
For most live text previews, the input event is often a better choice because it responds to changes made through typing, pasting, and other input methods.
Detect a Specific Keyboard Key
You can use the event.key property to detect a particular key, such as Enter or Escape.
<input type="text" id="messageInput" placeholder="Type a message">
<p id="status"></p>
<script>
const input = document.getElementById("messageInput");
const status = document.getElementById("status");
input.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
status.textContent = "You pressed Enter!";
}
});
</script>When the user presses Enter while the input field is focused, JavaScript displays a message.
This technique can be useful for search fields, chat interfaces, and keyboard-based controls.
Detect Keyboard Shortcuts
Keyboard events can detect combinations of keys. For example, you can check whether Ctrl and Enter are pressed together.
<textarea id="editor" placeholder="Write something"></textarea>
<p id="status"></p>
<script>
const editor = document.getElementById("editor");
const status = document.getElementById("status");
editor.addEventListener("keydown", function(event) {
if (event.ctrlKey && event.key === "Enter") {
status.textContent = "Ctrl + Enter detected!";
}
});
</script>On supported keyboards, pressing Ctrl and Enter together displays the message. On macOS, you may want to support event.metaKey as well, since Command is commonly used for shortcuts.
Keyboard Events and Accessibility
Keyboard support helps users navigate websites without a mouse. Interactive elements such as buttons, links, and form controls should work with standard keyboard actions.
Use semantic HTML elements whenever possible. For example, a real <button> already supports keyboard activation, so you generally do not need to recreate its behavior with custom keyboard event handlers.
For more information about interactive elements, explore our button events tutorial.
Keyboard Events vs. Input Events
Keyboard events detect key presses and releases, while the input event detects changes to a form control’s value.
| Feature | Keyboard Events | Input Event |
|---|---|---|
| Common events | keydown, keyup | input |
| Detects key presses | Yes | Not directly |
| Detects pasted text | Not reliably | Yes |
| Useful for | Shortcuts and key detection | Live input and text previews |
Choose the event that matches the behavior you want to implement.
Frequently Asked Questions
What are keyboard events in JavaScript?
Keyboard events are browser events that occur when a user presses or releases a keyboard key.
What is the difference between keydown and keyup?
keydown occurs when a key is pressed, while keyup occurs when the key is released.
What does event.key return?
The event.key property identifies the key involved in the keyboard event, such as "Enter", "Escape", or "a".
Is the keypress event still recommended?
No. The keypress event is deprecated. Use keydown or keyup when detecting keyboard actions.
Final Thoughts
Keyboard events allow JavaScript to respond to key presses, key releases, and keyboard shortcuts. Start by practicing keydown and keyup, then learn to detect specific keys and modifier combinations. Use semantic HTML and the appropriate events to build accessible, interactive webpages.