Element: keydown event
The keydown
event is fired when a key is pressed.
Unlike the keypress
event, the keydown
event is fired for all keys, regardless of whether they produce a character value.
Bubbles | Yes |
---|---|
Cancelable | Yes |
Interface | KeyboardEvent |
Event handler property | onkeydown |
The keydown
and keyup
events provide a code indicating which key is pressed, while keypress
indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown
and keyup
, but as 97 by keypress
. An uppercase "A" is reported as 65 by all events.
Keyboard events are only generated by <inputs>
, <textarea>
and anything with the contentEditable
attribute or with tabindex="-1"
.
Since Firefox 65, the keydown
and keyup
events are now fired during IME composition, to improve cross-browser compatibility for CJKT users (bug 354358. To ignore all keydown
events that are part of composition, do something like this (229 is a special value set for a keyCode
relating to an event that has been processed by an IME):
eventTarget.addEventListener("keydown", event => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// do something
});
Examples
addEventListener keydown example
This example logs the KeyboardEvent.code
value whenever you press down a key inside the <input>
element.
<input placeholder="Click here, then press down a key." size="40">
<p id="log"></p>
const input = document.querySelector('input');
const log = document.getElementById('log');
input.addEventListener('keydown', logKey);
function logKey(e) {
log.textContent += ` ${e.code}`;
}
onkeydown equivalent
input.onkeydown = logKey;
Specifications
Specification |
---|
UI Events # event-type-keydown |
Browser compatibility
BCD tables only load in the browser