keydown

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Событие keydown срабатывает, когда клавиша была нажата.

В отличии от события keypress, событие keydown срабатывает на всех клавишах, независимо от того, есть ли у них значение.

Bubbles Yes
Cancelable Yes
Interface KeyboardEvent
Event handler property onkeydown

События keydown и keyup показывают то, что клавиша была нажата, в то время как keypress показывает то, какой символ был введён. Например, прописную "a" keydown и keyup сообщат как 65, а keypress сообщит как 97. Заглавную же "A" все события сообщают как 65.

События клавиатуры генерируются только в <inputs>, <textarea> и любых элементах с атрибутом contentEditable или tabindex="-1".

Примеры

Примеры addEventListener keydown

Этот пример отображает значение KeyboardEvent.code всякий раз, когда вы нажимаете клавишу внутри <input> элемента.

html
<input placeholder="Кликните здесь, затем нажмите клавишу." 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

js
input.onkeydown = logKey;

Спецификации

Specification
UI Events
# event-type-keydown
HTML
# handler-onkeydown

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
keydown event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также