В последних нескольких версиях Chrome появилось два дополнения к KeyboardEvent , которые используются в качестве параметра, передаваемого прослушивателям событий keydown , keypress и keyup . И атрибут code (добавленный в Chrome 48 ), и атрибут key (добавленный в Chrome 51 ) дают разработчикам простой способ получить информацию, которая в противном случае была бы затруднительна с использованием устаревших атрибутов.
Атрибут кода
Прежде всего, это атрибут code . Это строка , представляющая клавишу, которая была нажата для создания KeyboardEvent , без учета текущей раскладки клавиатуры (например, QWERTY или Dvorak ), локали (например, английского или французского) или каких-либо клавиш-модификаторов. . Это полезно, когда вас волнует, какая физическая клавиша была нажата, а не какой символ ей соответствует. Например, если вы пишете игру, вам может потребоваться определенный набор клавиш для перемещения игрока в разных направлениях, и в идеале это сопоставление должно быть независимым от раскладки клавиатуры.
Ключевой атрибут
Далее у нас есть новый key атрибут. Ему также присвоено значение string , но хотя code возвращает информацию о нажатой физической клавише, key содержит символ, сгенерированный этой клавишей, с учетом текущей раскладки клавиатуры, языкового стандарта и клавиш-модификаторов. Просмотр значения key атрибута полезен, когда вам нужно знать, какой символ будет отображаться на экране, как если бы пользователь ввел текст.
Что это означает на практике?
В качестве конкретного примера предположим, что ваш пользователь использует американскую клавиатуру с раскладкой QWERTY. Нажатие физической клавиши Q на этой клавиатуре приведет к созданию KeyboardEvent с атрибутом code , установленным на "KeyQ" . Это справедливо независимо от раскладки клавиатуры и любых других клавиш-модификаторов. Для сравнения, на французской клавиатуре ( AZERTY ) эта клавиша по-прежнему будет иметь code "KeyQ" даже если буква, напечатанная на колпачке клавиши, — это «а». Нажатие физической клавиши Q на той же американской клавиатуре обычно генерирует KeyboardEvent с key установленным на "q" (без клавиш-модификаторов), или "Q" (с Shift или CapsLock), или "œ" (в OS X, с Альт). На французской клавиатуре AZERTY эта же клавиша будет генерировать букву «а» (или «А» с помощью Shift или CapsLock). А для других раскладок клавиатуры значением key может быть "й" , "ض" , "ㅂ" , "た" или какой-либо другой символ. Возвращаясь к нашему предыдущему примеру игры: если вы хотите, чтобы ваша игра использовала клавиши WASD для перемещения, вы можете использовать атрибут code и проверить "KeyW" , "KeyA" , "KeyS" и "KeyD" . Это будет работать для всех клавиатур и всех раскладок, даже для клавиатур AZERTY, которые меняют положение клавиш «w» и «z».
Виртуальные клавиатуры
Вы заметите, что до сих пор мы фокусировались на поведении физической клавиатуры. А как насчет пользователей, которые печатают на виртуальной клавиатуре или альтернативном устройстве ввода? Спецификация предлагает официальное руководство по атрибуту code . Подводя итог, можно сказать, что виртуальная клавиатура, имитирующая раскладку стандартной клавиатуры, как ожидается, приведет к установке соответствующего атрибута code , но виртуальные клавиатуры, использующие нетрадиционные раскладки, могут привести к тому, что code вообще не будет установлен.
С key атрибутом дела обстоят проще, и вы должны ожидать, что он будет установлен в строку в зависимости от того, какой символ (виртуально) набрал пользователь.
Попробуйте это
Гэри Качмарчик собрал фантастическую демонстрацию для визуализации всех атрибутов, связанных с KeyboardEvent :
Кроссбраузерная поддержка
На момент написания этой статьи поддержка атрибута code ограничивалась Chrome 48+, Opera 35+ и Firefox 44+. Атрибут key поддерживается в Firefox 44+, Chrome 51+ и Opera 38+, с частичной поддержкой в Internet Explorer 9+ и Edge 13+.