Просмотр событий клавиатуры
Событий: 0 Хранятся последние 200
СобытиеkeycodekeyCodeПоз.Модиф.Повт.Δ мс
События появятся здесь, новые сверху.
key, code и keyCode
3 свойстваKeyboardEvent описывает нажатие тремя способами. На французской клавиатуре AZERTY та же физическая клавиша даёт другое значение key, тот же code и keyCode, который следует за буквой.
СвойствоЧто даётQWERTYAZERTY
keyСимвол, который печатает раскладка, или имя клавиши (Enter, Shift)qacodeФизическая клавиша, при любой раскладкеKeyQKeyQkeyCodeЧисловой код, устарел, но всё ещё отправляется8165Для сочетаний по положению (WASD) берите code, для текста и сочетаний по букве – key.
location
4 значенияСвойство location говорит, с какой стороны стоит парная клавиша или что клавиша на цифровом блоке.
0 · ОбычнаяБольшинство клавиш, которые есть на клавиатуре в одном экземпляре
1 · ЛеваяЛевые Shift, Ctrl, Alt и Meta
2 · ПраваяПравые Shift, Ctrl, Alt и Meta
3 · Цифровой блокКлавиши цифрового блока, включая Enter
Методы ввода и keyCode 229
IMEКогда включён китайский, японский или корейский метод ввода, клавиши сначала забирает он. Страница видит key «Process» и keyCode 229, а текст приходит в событиях composition. Набор ni для китайского слова:
keydownkey «Process» · keyCode 229compositionstartМетод ввода начинает словоcompositionupdatedata n, потом nikeydownПробел выбирает вариантcompositionenddata – выбранное словоinputinputType insertCompositionText
Проверяйте isComposing, прежде чем реагировать на клавишу, иначе Enter, которым выбирают слово, ещё и отправит форму.
Клавиши-модификаторы
getModifierStateКаждое событие передаёт состояние модификаторов, зажатых в этот момент. getModifierState() показывает ещё и состояние клавиш с фиксацией.
ShiftshiftKeyControlctrlKeyAltaltKeyMetametaKey (Windows или Command на Mac)CapsLockСостояние переключателя, а не нажата ли клавишаNumLockСостояние переключателя, на Mac часто неизвестноAltGraphПравый Alt во многих европейских раскладкахScrollLockРедко на современных клавиатурахЧастые вопросы
Вопросов: 8Чем event.key отличается от event.code?
Символ или физическая клавишаkey – то, что клавиша печатает в текущей раскладке, например a или A. code – физическая клавиша, например KeyA, и он одинаков в любой раскладке. Здесь видны оба для каждого нажатия.
Почему keyCode равен 229?
Метод вводаКлавишу обрабатывает метод ввода (IME). key показывает «Process», а текст приходит позже в событиях composition и input. Печатайте в поле, чтобы их увидеть.
keyCode устарел?
ДаkeyCode, which и charCode устарели, но браузеры их всё ещё отправляют. Новый код должен читать key или code.
Почему у Fn нет никакого события?
Не отправляетсяFn обрабатывает сама клавиатура и не отправляет код клавиши, так что ни одна веб-страница её не получает. А клавиша, нажатая вместе с Fn, например F5 или громкость, видна.
Почему нельзя поймать Ctrl+W или Ctrl+T?
Их держит браузерНекоторые сочетания браузер оставляет себе: закрытие вкладки, новая вкладка, новое окно. Запрет действий по умолчанию перехватывает большинство других клавиш, например Tab, F5 или /, но не эти.
Почему зажатая клавиша снова и снова шлёт keydown?
АвтоповторСистема повторяет зажатую клавишу. Каждый повтор – это keydown с repeat true, а при отпускании приходит один keyup.
Почему на Mac пропадают некоторые keyup?
Зажата CommandПока зажата Command, браузеры в macOS не отправляют keyup для остальных клавиш, и после отпускания Command он тоже не приходит. Тест клавиатуры Mac →
Отправляются ли мои нажатия куда-нибудь?
Тест – нетСобытия обрабатываются только в этом браузере. Код теста их не отправляет, и они стираются, когда вы закрываете страницу. Политика конфиденциальности →