JavaScript Events
JavaScript Keyboard Events
Keyboard events report which key was pressed and let you respond to it.
keydown fires as the key goes down, keyup as it comes back.
event.key tells you which key it was.
Example
Example
javascript
document.body.innerHTML = '<input id="field">';
document.getElementById("field").addEventListener("keydown", function (event) {
console.log("pressed " + event.key);
});
document.getElementById("field").dispatchEvent(
new KeyboardEvent("keydown", { key: "a" })
);The output is pressed a.
The Keyboard Events
keydown fires when a key is pushed down, and repeats if it is held.
keyup fires when it is released.
event.key is the character or the key's name, such as Enter.
Syntax
Syntax
javascript
element.addEventListener("keydown", function (event) {
console.log(event.key);
});keypress is deprecated; use keydown.
Named Keys
Keys without a character have a descriptive name.
Example
Example
javascript
document.body.innerHTML = '<input id="field">';
const field = document.getElementById("field");
field.addEventListener("keydown", function (event) {
console.log(event.key);
});
field.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
field.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));Common names include Enter, Escape, Tab, Backspace and ArrowUp.
Reacting to Enter
Submitting on Enter is one of the most common uses.
Example
Example
javascript
document.body.innerHTML = '<input id="field" value="hello">';
const field = document.getElementById("field");
field.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
console.log("submitting " + field.value);
}
});
field.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));Other keys are simply ignored.
Modifier Keys
shiftKey, ctrlKey, altKey and metaKey are booleans.
Example
Example
javascript
document.body.innerHTML = '<input id="field">';
document.getElementById("field").addEventListener("keydown", function (event) {
if (event.ctrlKey && event.key === "s") {
console.log("save shortcut");
}
});
document.getElementById("field").dispatchEvent(
new KeyboardEvent("keydown", { key: "s", ctrlKey: true })
);A real shortcut usually needs preventDefault as well.
keydown Fires Before the Value Changes
On keydown the character has not been added to the input yet.
Use the input event when you want the new value.
Example
Example
javascript
document.body.innerHTML = '<input id="field">';
const field = document.getElementById("field");
field.addEventListener("input", function () {
console.log("value is now " + field.value);
});
field.value = "ab";
field.dispatchEvent(new Event("input"));input also catches pasting, which keydown misses.
Listening on the Whole Page
Attach to document for shortcuts that work anywhere.
Example
Example
javascript
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
console.log("close the dialog");
}
});
document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));Escape closing a dialog is a convention worth following.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Keyboard Events</title>
</head>
<body>
<h1>Keyboard Events</h1>
<input id="field" placeholder="Type something">
<p id="out"></p>
<script>
const field = document.getElementById("field");
const out = document.getElementById("out");
field.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
out.textContent = "You submitted: " + field.value;
} else {
out.textContent = "You pressed: " + event.key;
}
});
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try the arrow keys:
Press an arrow key and see the name that appears.
Important Points
keydownfires when a key goes down.event.keyis the character or the key's name.- Named keys include Enter, Escape and the arrows.
ctrlKeyand friends report modifier keys.- Use the
inputevent to read the updated value.
Conclusion
Keyboard events make a page usable without a mouse.
event.key is far clearer than the old numeric key codes.
Supporting Enter and Escape is a small change that improves most interfaces.