Widely available Supported across all major browsers. Safe to use in production.

Keyboard events

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. The event bubbles. It can reach Document and Window.

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.

Events

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`KeyboardEvent`	1	12	1.5	1.2	18	1
`keydown_event` The keydown event is fired when a key is pressed.	1	12	6	1.2	18	1
`keyup_event` The keyup event is fired when a key is released.	1	12	6	1.2	18	1
`altKey` The KeyboardEvent.altKey read-only property is a boolean value that indicates if the alt key (Option or ⌥ on macOS) was pressed (true) or not (false) when the event occurred.	1	12	1.5	1.2	18	1
`code` The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value that isn't altered by keyboard layout or the state of the modifier keys.	48	79	38	10.1	48	10.3
`ctrlKey` The KeyboardEvent.ctrlKey read-only property returns a boolean value that indicates if the control key was pressed (true) or not (false) when the event occurred.	1	12	1.5	1.2	18	1
`getModifierState` The KeyboardEvent.getModifierState() method returns the current state of the specified modifier key: true if the modifier is active (that is the modifier key is pressed or locked), otherwise, false.	30	12	15	10.1	30	10.3
`getModifierState (key parameter alt)` `"Alt"` as `key` parameter	30	12	15	10.1	30	10.3
`getModifierState (key parameter altgraph)` `"AltGraph"` as `key` parameter	48	79	15	10.1	48	10.3
`getModifierState (key parameter capslock)` `"CapsLock"` as `key` parameter	48	12	15	10.1	48	10.3
`getModifierState (key parameter control)` `"Control"` as `key` parameter	30	12	15	10.1	30	10.3
`getModifierState (key parameter fn)` `"Fn"` as `key` parameter	48	79	15		48
`getModifierState (key parameter meta)` `"Meta"` as `key` parameter	30	79	15	10.1	30	10.3
`getModifierState (key parameter numlock)` `"NumLock"` as `key` parameter	48	79	15		48
`getModifierState (key parameter scrolllock)` `"ScrollLock"` as `key` parameter	48	79	15		48
`getModifierState (key parameter shift)` `"Shift"` as `key` parameter	30	12	15	10.1	30	10.3
`getModifierState (key parameter symbol)` `"Symbol"` as `key` parameter	48	79			48
`isComposing` The KeyboardEvent.isComposing read-only property returns a boolean value indicating if the event is fired within a composition session, i.e., after Element/compositionstartevent and before Element/compositionendevent.	56	79	31	10.1	56	10.3
`key` The KeyboardEvent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as Shift as well as the keyboard locale and layout.	51	12	23	10.1	51	10.3
`key (dead key)` Dead key	51	79	37	10.1	51	10.3
`key (non printable keys)` Non-printable keys	51	12	23	10.1	51	10.3
`key (printable key)` Printable keys	51	12	29	10.1	51	10.3
`KeyboardEvent` The KeyboardEvent() constructor creates a new KeyboardEvent object.	26	12	31	7	26	7
`location` The KeyboardEvent.location read-only property returns an unsigned long representing the location of the key on the keyboard or other input device.	30	12	15	8	30	8
`metaKey` The KeyboardEvent.metaKey read-only property returning a boolean value that indicates if the Meta key was pressed (true) or not (false) when the event occurred. Some operating systems may intercept the key so it is never detected.	1	12	1.5	1.2	18	1
`repeat` The repeat read-only property of the KeyboardEvent interface returns a boolean value that is true if the given key is being held down such that it is automatically repeating.	137	12	28	10.1	137	10.3
`shiftKey` The KeyboardEvent.shiftKey read-only property is a boolean value that indicates if the shift key was pressed (true) or not (false) when the event occurred.	1	12	1.5	1.2	18	1

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

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

onkeydown = (event) => { }

Use cases

Using Keyboard events

The keydown event is fired when a key is pressed.

Cautions

May not be supported in older browsers.

Implementation notes

Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.