Объекты KeyboardEvent описывают работу пользователя с клавиатурой. Каждое событие описывает клавишу; тип события (keydown, keypress или keyup) определяет произведённый тип действия.
KeyboardEvent сообщит только о том, что на клавише произошло событие. Когда вам нужно обрабатывать ввод текста, то вместо него используйте "HTML5 input"-событие. Например, если пользователь вводит текст рукописным способом, предположим с планшета, то события клавиш могут не возникать.KeyboardEvent.Этот интерфейс также наследует методы от своих родителей: {{domxref("UIEvent")}} и {{domxref("Event")}}.
KeyboardEvent. Этот метод реализован только в движке Gecko (остальные использовали метод {{domxref("KeyboardEvent.initKeyboardEvent()")}}), и он не должен в дальнейшем использоваться. Новый стандартный способ - это использование конструктора {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.KeyboardEvent. Этот метод никогда не был реализован в движке Gecko (вместо него использовался {{domxref("KeyboardEvent.initKeyEvent()")}}), и он не должен в дальнейшем использоваться. Новый стандартный способ - это использование конструктора {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.Этот интерфейс также наследует свойства от своих родителей: {{domxref("UIEvent")}} and {{domxref("Event")}}.
true, если клавиша Alt ( Option или ⌥ в OS X) была активна, когда возникло событие.keypress. Для клавиш, чей char-атрибут содержит несколько символов, то значением этого атрибута будет Unicode-значение первого символа. В Firefox 26 этот атрибут возвращал коды для печатных символов.
true, если клавиша Ctrl была активна, когда возникло событие.true, если событие возникло между "после-compositionstart" и "до-compositionend".true, если клавиша Meta (на клавиатуре Mac - клавиша ⌘ Command; на Windows-клавиатуре - клавиша "Windows" ⊞) была активна, когда возникло событие.true, если клавиша была нажата до тех пор, пока её ввод не начал автоматически повторяться.true, если клавиша Shift была активна, когда возникло событие.keyCode.
Особенности событий keydown, keypress и keyup. Для большинства клавиш Gecko обрабатывает последовательность событий так:
keydown.keypress.keyup.Некоторые клавиши переключают подсветку индикаторов, такие как Caps Lock, Num Lock и Scroll Lock. На Windows и Linux эти клавиши создают только лишь события keydown и keyup.
В Linux Firefox 12 и более ранних также обрабатывается событие keypress.
Но в связи с ограничениями Mac OS X модель событий клавиши Caps Lock включает в себя только keydown. События Num Lock поддерживались на старых ноутбуках (2007 года и старше), но затем Mac OS X их перестала поддерживать, даже на внешних клавиатурах. На совсем старых MacBooks клавиша Num Lock вообще не генерирует никаких событий. Движок Gecko не поддерживает клавишу Scroll Lock, если это внешняя клавиатура с клавишей F14. В некоторых старых версиях Firefox эта клавиша генерирует событие keypress; это являлось нестабильным поведением и описано в {{bug(602812)}}.
Когда клавиша нажата и удерживается, то начинается автоповтор. Результатом этого будет последовательность событий аналогичная следующей:
keydownkeypresskeydownkeypresskeyupЭто то, что должно произойти в соответствии со спецификацией DOM Level 3. Однако, есть несколько предостережений относительно этого, описанных ниже.
В некоторых GTK-средах автоповтор обрабатывается автоматически нативными функциями как событие key-up, и у Gecko нет способа отличить серию одиночных нажатий от автоповтора. На таких платформах автоповтор генерирует следующую последовательность событий:
keydownkeypresskeyupkeydownkeypresskeyupkeyupВ этих средах, к сожалению, нет возможности сказать веб-контенту, произошёл автоповтор или клавиша была нажата несколько раз.
До Gecko 5.0 {{geckoRelease('5.0')}} обработка событий клавиатуры была различна на разных платформах.
keydown только отправляются события keypress до тех пор, пока не произойдёт событие keyup; внутриинтервальные события keydown не отправляются.Замечание: при вызове события вручную не происходит никакого действия по умолчанию, связанного с данным событием. Например, если вызвать вручную событие нажатия клавиши, то никакая буква на поле вводимого текста не появится. В случае событий пользовательского интерфейса, что важно по соображениям безопасности, это предотвращает работу скриптов в браузере, которые эмулируют работу пользователя.
<!DOCTYPE html>
<html>
<head>
<script>
'use strict';
document.addEventListener('keydown', (event) => {
const keyName = event.key;
if (keyName === 'Control') {
// not alert when only Control key is pressed.
return;
}
if (event.ctrlKey) {
// Хотя event.key это не 'Control' (например, нажата клавиша 'a'),
// то всё же event.ctrlKey может быть true, если ударживается клавиша Ctrl.
alert(`Combination of ctrlKey + ${keyName}`);
} else {
alert(`Key pressed ${keyName}`);
}
}, false);
document.addEventListener('keyup', (event) => {
const keyName = event.key;
// Как только пользователь отпустит клавишу Ctrl, то она больше не будет активной.
// Поэтому event.ctrlKey = false.
if (keyName === 'Control') {
alert('Control key was released');
}
}, false);
</script>
</head>
<body>
</body>
</html>
| Спецификация | Статус | Комментарий |
|---|---|---|
| {{SpecName('DOM3 Events', '#interface-keyboardevent', 'KeyboardEvent')}} | {{Spec2('DOM3 Events')}} | Первоначальное определение |
Спецификация интерфейса KeyboardEvent прошла многочисленные черновые варианты, сперва в DOM Events Level 2, где её поддержка не добилась консенсуса, затем в DOM Events Level 3. Это привело к реализации нестандартных методов инициализации Gecko-браузерами в ранних версиях DOM Events Level 2 {{domxref("KeyboardEvent.initKeyEvent()")}} и в ранних версиях DOM Events Level 3 {{domxref("KeyboardEvent.initKeyboardEvent()")}} остальными браузерами. Но оба были заменены новой формой использования конструктора:{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
{{CompatibilityTable}}
| Возможность | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Базовая поддержка | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
| constructor | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatGeckoDesktop("31.0")}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatUnknown}} |
.char |
{{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | 9 | {{CompatNo}} | {{CompatNo}} |
.charCode |
{{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
.isComposing |
{{CompatNo}} | {{CompatUnknown}} | {{CompatGeckoDesktop("31.0")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
.keyCode |
{{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
.locale |
{{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatNo}} |
.location |
{{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatGeckoDesktop("15.0")}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatNo}} |
.repeat |
{{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatGeckoDesktop("28.0")}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatNo}} |
.which |
{{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
.initKeyboardEvent() |
{{CompatVersionUnknown}}[1] | {{CompatUnknown}} | {{CompatNo}}[2] | {{CompatIE("9.0")}}[3] | {{CompatUnknown}} | {{CompatVersionUnknown}}[1] |
| Возможность | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Базовая поддержка | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| constructor | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile("31.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
.char |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
.charCode |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
.isComposing |
{{CompatNo}} | {{CompatUnknown}} | {{CompatGeckoMobile("31.0")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
.keyCode |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
.locale |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
.location |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile("15.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
.repeat |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile("28.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
.which |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
.initKeyboardEvent() |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] Аргументы функции initKeyboardEvent() в WebKit и в Blink отличаются от определения в документе "DOM Level 3 Events". Эта функция выглядит так: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyIdentifierArg, in number locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)
[2] Gecko-движок не будет поддерживать initKeyboardEvent(), потому что её поддержка полностью ломает определение фич веб-приложений. Смотрите {{Bug(999645)}}.
[3] Аргументы initKeyboardEvent() в IE отличаются от определения в документе "DOM Level 3 Events". Эта функция выглядит так: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in number locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg). Смотрите документ о initKeyboardEvent() на сайте MSDN.