Element: keydown event
The keydown
event is fired when a key is pressed.
Unlike the deprecated keypress
event, the keydown
event is fired for all keys, regardless of whether they produce a character value.
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.
The event target of a key event is the currently focused element which is processing the keyboard activity. This includes: <input>
, <textarea>
, anything that is contentEditable
, and anything else that can be interacted with the keyboard, such as <a>
, <button>
, and <summary>
. If no suitable element is in focus, the event target will be the <body>
or the root. If not caught, the event bubbles up the DOM tree until reaching Document
.
The event target might change between different key events. For example, the keydown
target for pressing the Tab key would be different from the keyup
target, because the focus has changed.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("keydown", (event) => {});
onkeydown = (event) => {};
Event type
A KeyboardEvent
. Inherits from UIEvent
and Event
.
Event properties
This interface also inherits properties of its parents, UIEvent
and Event
.
KeyboardEvent.altKey
Read only-
Returns a boolean value that is
true
if the Alt (Option or ⌥ on macOS) key was active when the key event was generated. KeyboardEvent.code
Read only-
Returns a string with the code value of the physical key represented by the event.
Warning: This ignores the user's keyboard layout, so that if the user presses the key at the "Y" position in a QWERTY keyboard layout (near the middle of the row above the home row), this will always return "KeyY", even if the user has a QWERTZ keyboard (which would mean the user expects a "Z" and all the other properties would indicate a "Z") or a Dvorak keyboard layout (where the user would expect an "F"). If you want to display the correct keystrokes to the user, you can use
Keyboard.getLayoutMap()
. KeyboardEvent.ctrlKey
Read only-
Returns a boolean value that is
true
if the Ctrl key was active when the key event was generated. KeyboardEvent.isComposing
Read only-
Returns a boolean value that is
true
if the event is fired between aftercompositionstart
and beforecompositionend
. KeyboardEvent.key
Read only-
Returns a string representing the key value of the key represented by the event.
KeyboardEvent.location
Read only-
Returns a number representing the location of the key on the keyboard or other input device. A list of the constants identifying the locations is shown in Keyboard locations.
KeyboardEvent.metaKey
Read only-
Returns a boolean value that is
true
if the Meta key (on Mac keyboards, the ⌘ Command key; on Windows keyboards, the Windows key (⊞)) was active when the key event was generated. KeyboardEvent.repeat
Read only-
Returns a boolean value that is
true
if the key is being held down such that it is automatically repeating. KeyboardEvent.shiftKey
Read only-
Returns a boolean value that is
true
if the Shift key was active when the key event was generated.
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}`;
}
keydown events with IME
Since Firefox 65, the keydown
and keyup
events are now fired during IME composition, to improve cross-browser compatibility for CJKT users (Firefox 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
});
Note: compositionstart
may fire after keydown
when typing the first character that opens up the IME, and compositionend
may fire before keydown
when typing the last character that closes the IME. In these cases, isComposing
is false even when the event is part of composition. However, KeyboardEvent.keyCode
is still 229
in these cases, so it's still advisable to check keyCode
as well, although it's deprecated.
Specifications
Specification |
---|
UI Events # event-type-keydown |
HTML Standard # handler-onkeydown |
Browser compatibility
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.