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):


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


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

onkeydown = (event) => {};
```

Event type
----------

A `KeyboardEvent`. Inherits from `UIEvent` and `Event`.

Event

UIEvent

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



```js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keydown", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### onkeydown equivalent


```js
input.onkeydown = logKey;
```

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.

See also
--------

* `input`
* `keypress`
* `keyup`