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.

Keyboard events are only generated by <input>, <textarea>, <summary> and anything with the contentEditable or tabindex attribute. If not caught, they bubble up the DOM tree until they reach Document.

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
});

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 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 after compositionstart and before compositionend.
KeyboardEvent.key Read only: Returns a string representing the key value of the key represented by the event.
KeyboardEvent.locale Read only: Returns a string representing a locale string indicating the locale the keyboard is configured for. This may be the empty string if the browser or device doesn't know the keyboard's locale.

Note: This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.
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.

html

<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
HTML Standard # handler-onkeydown

Browser compatibility

BCD tables only load in the browser