Журнал событий клавиатуры.
Диагностическая панель, показывающая сырые события клавиатуры браузера. Полезна разработчикам при отладке обработчиков событий или проверке конкретных свойств клавиш.
События в реальном времени
| Событие | Key | Code | KeyCode | Location | Модификаторы | Время |
|---|---|---|---|---|---|---|
| События клавиатуры пока не зафиксированы. Наведите фокус на область захвата и нажмите несколько клавиш. | ||||||
Проверьте это перед записью
- Наведите фокус на поле захватаСначала кликните по нему или нажмите Tab — события не записываются, пока оно не в фокусе.
- Очищайте журнал между тестамиСбрасывайте журнал перед каждой новой клавишей, чтобы проверки на повторяющиеся события было легко читать.
- Следите за временными меткамиДва события keydown с разницей в миллисекунды от одного касания указывают на дребезжащий переключатель, а не на ошибку.
Как работает журнал событий
- 1
Наведите фокус на область захвата. Нажмите на поле выше или клавишу Tab, чтобы навести на неё фокус. Текст статуса изменится, показывая, что идёт прослушивание событий клавиатуры.
- 2
Нажимайте любые клавиши. Каждое событие keydown и keyup записывается вместе со своими сырыми свойствами — key, code, keyCode, location, модификаторы и временная метка. Таблица обновляется в реальном времени, новые события добавляются сверху.
- 3
Управляйте своим журналом. Используйте кнопку «Очистить журнал», чтобы сбросить таблицу, или «Экспорт в CSV», чтобы скачать все события для анализа в таблице или инструменте отладки.
Разбираемся в свойствах событий клавиатуры
key — это фактический символ, который производит клавиша (например, "a", "A", "1"). Он меняется в зависимости от раскладки клавиатуры и от того, активны ли модификаторы (Shift, Alt). На французской клавиатуре AZERTY крайняя левая буквенная клавиша производит "a" вместо "q".
code — это физическая клавиша, независимая от раскладки (например, "KeyA", "Digit1", "Enter"). Нажатие одной и той же физической клавиши всегда возвращает один и тот же код, независимо от раскладки или модификаторов.
keyCode — это устаревший числовой код (например, 65 для клавиши A), появившийся ещё до современных свойств key и code. Сейчас он считается устаревшим, потому что был непоследовательным между браузерами и ненадёжным для международных раскладок и специальных клавиш. Используйте вместо него code или key.
location различает дублирующиеся клавиши на вашей клавиатуре. Стандартные клавиши сообщают location 0; левые модификаторы (Shift, Ctrl, Alt) сообщают 1; правые модификаторы сообщают 2; клавиши цифрового блока сообщают 3. Журнал отображает их понятными метками: «Стандартная», «Слева (Mod)», «Справа (Mod)», «Цифровой блок».
Флаги модификаторов — это булевы свойства — ctrlKey, shiftKey, altKey, metaKey — которые показывают, был ли зажат Ctrl, Shift, Alt или Command/Windows во время события. Они свободно комбинируются: нажатие Ctrl+Shift+A устанавливает и ctrlKey, и shiftKey в true.
repeat равен true, когда удерживаемая клавиша генерирует повторяющиеся события keydown (автоповтор). Первое событие keydown имеет repeat: false; если вы удерживаете клавишу, последующие события keydown имеют repeat: true. Этот журнал отображает только keydown и keyup, так что вы можете заметить повторяющиеся клавиши, наблюдая за скоплениями одинаковых записей.
Кому подойдёт журнал событий
Отладка обработчиков клавиш
Веб-разработчики, создающие собственные взаимодействия с клавиатурой, могут увидеть, какие именно события срабатывают и в каком порядке, а также изучить все свойства объекта события, чтобы убедиться, что обработчики правильно реагируют на клавиши, которые нажимают ваши пользователи.
Обнаружение дребезга клавиш
Неисправный переключатель иногда регистрирует два события keydown от одного нажатия (дребезг). Следите за временными метками, и вы сможете заметить быстрые дубликаты и проследить их до одной физической клавиши — признак износа оборудования или переключателя, требующего внимания.
Идентификация неизвестных клавиш
Нашли на своей клавиатуре клавишу с незнакомой надписью или медиа-символом? Нажмите её здесь и прочтите её свойства code и key, чтобы понять, какое событие она генерирует, или чтобы назначить её в своём приложении или игровой настройке.
Проверка ремаппинга и модификаторов
Тестируйте программы переназначения клавиш или привязки клавиш на уровне ОС, записывая события и проверяя, что нажатые клавиши производят ожидаемые комбинации code и модификаторов. Проверьте, что AltGr и другие международные модификаторы регистрируются корректно.
Глоссарий событий клавиатуры
key- Символ, производимый нажатием клавиши, зависит от раскладки клавиатуры и модификаторов — например, "a", "A", "1", "!", "é".
code- Физическое расположение клавиши, независимое от раскладки — например, "KeyA", "Digit1", "Enter", "Space", всегда одно и то же независимо от раскладки или модификаторов.
keyCode(устарело)- Устаревший числовой код (например, 65 для клавиши A). Не используйте в новом коде — он непоследователен между браузерами и ненадёжно работает с международными клавиатурами.
location- Физическое положение клавиши: 0 = стандартная, 1 = левый модификатор, 2 = правый модификатор, 3 = цифровой блок. Различает левый Shift от правого Shift и клавиши цифрового блока от обычных клавиш.
repeat- Булев флаг, равный true, когда удерживаемая клавиша генерирует повторяющееся событие keydown (автоповтор). Первое событие keydown — false; последующие — true, пока клавиша остаётся нажатой.
- Флаги модификаторов (
ctrlKey,shiftKey,altKey,metaKey) - Булевы флаги, показывающие, был ли зажат Ctrl, Shift, Alt или Command/Windows во время события. Несколько флагов могут быть true одновременно для комбинаций клавиш.
FAQ по журналу событий клавиатуры
В чём разница между key и code?
key — это фактический символ, производимый клавиатурой (например, 'a', 'A', '1', '!'), который зависит от раскладки клавиатуры и от того, зажаты ли модификаторы вроде Shift. code — это физическое расположение клавиши (например, 'KeyA', 'Digit1'), независимое от раскладки и модификаторов — нажатие одной и той же физической клавиши в разных регионах всегда возвращает один и тот же code. Для международных клавиатур code остаётся постоянным, пока key меняется.
Что такое keyCode и почему он устарел?
keyCode — это устаревший числовой код, присваиваемый каждой клавише (например, 65 для клавиши A). Он использовался до появления современных свойств key и code и считается устаревшим, потому что был непоследователен между браузерами и ненадёжно работает с международными клавиатурами или специальными клавишами. Используйте вместо него code для физического расположения клавиши и key для производимого символа.
Как обнаружить дребезг клавиши (клавиша регистрируется дважды)?
Дребезг клавиши происходит, когда одно нажатие производит два или более событий keydown без промежуточного keyup. Проверьте журнал на быстрые дублирующиеся записи keydown с одинаковым code и очень маленькой разницей во времени (обычно менее 50 мс). Если клавиша стабильно дребезжит, это может быть аппаратная проблема этого переключателя. Некоторые клавиатуры или драйверы можно настроить на подавление дребезга; сверьтесь с прошивкой или ПО вашей клавиатуры.
Сохраняет или загружает ли журнал мои нажатия клавиш?
Нет. Всё логирование происходит полностью в вашем браузере. Ничто из того, что вы печатаете, не отправляется на сервер, не загружается, не хранится и не логируется нигде за пределами вашего устройства. Обновление страницы полностью очищает журнал. Этот журнал — диагностический инструмент для разработчиков — ваша конфиденциальность и данные никуда не передаются.
Почему некоторые клавиши — например Fn или мультимедийные — не появляются в журнале?
Такие клавиши, как Fn, и многие специальные клавиши мультимедиа, громкости или яркости обрабатываются прошивкой клавиатуры или операционной системой ещё до того, как браузер увидит событие, поэтому регистратору попросту нечего записать. Это ожидаемо, а не сбой. Если же обычная клавиша по-прежнему не создаёт здесь событие keydown — после того как вы кликнули по полю захвата, чтобы активировать его, — это указывает скорее на неисправный переключатель или обрыв соединения.