Element: keydown event

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("keydown", (event) => {});

onkeydown = (event) => {};

A KeyboardEvent. Inherits from UIEvent and Event.

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.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.

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

Since Firefox 65, the keydown and keyup events are now fired during Input method editor 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
});

• input
• keypress
• keyup