Список кодов клавиш JavaScript — коды клавиш событий нажатия клавиш для ввода, пробела, возврата и т.д.

События клавиатуры JavaScript помогают фиксировать действия пользователя с клавиатурой.

Как и многие другие события JavaScript, KeyboardEventинтерфейс предоставляет все необходимые свойства и методы для обработки каждого нажатия клавиши, которое пользователь делает с помощью клавиатуры.

Было написано много статей о том, как они работают и как их использовать. В то же время W3.org продолжает обновлять спецификацию, вводя новые свойства, исключая существующие и отмечая определенный код как устаревший.

Из-за этого веб-разработчикам важно продолжать изучать KeyboardEventинтерфейс, чтобы знать, что именно им следует использовать, а что больше не актуально.

В этой статье мы узнаем о:

• Интерфейс KeyboardEvent.
• Типы событий клавиатуры, на которых нам нужно сосредоточиться.
• Типы событий клавиатуры, которые нам могут никогда не понадобиться.
• Какие свойства вам нужны на практике и как их обрабатывают разные браузеры.
• Что не рекомендуется и что используется.
• Игровая площадка, где можно попробовать что-то во время обучения.
• Наконец, текущий список ключевых кодов для справки и использования в будущем.

Надеюсь, тебе понравится.

Интерфейс KeyboardEvent предоставляет информацию с использованием определенных констант, свойств и одного метода (по состоянию на январь 2021 г.). Он расширяет UIEventинтерфейс, который в конечном итоге расширяет Eventинтерфейс.

KeyboardEvent Иерархия

Есть в основном три типа событий клавиатуры, keydown, keypressи keyup. Мы можем получить контекстную информацию об этих событиях из KeyboardEventсвойств и методов интерфейса.

Вы можете добавить каждый из этих типов событий к элементу или documentобъекту HTML с помощью addEventListenerметода. Вот пример прослушивания keydownсобытия для элемента с идентификатором ‘type-here’:

let elem = document.getElementById('type-here');

elem.addEventListener("keydown", function (event) {

    addRow(event);
});

Кроме того, вы можете использовать методы обработки, как, onKeydown(event), onKeyup(event), onKeypress(event)с элементом для обработки событий клавиатуры. Вот пример обработки keyupсобытия в элементе ввода:

input type="text" id="type-here" onkeyup="doSomething(event)">

Если вы печатаете eventобъект в консоли браузера, вы увидите все его свойства и методы наряду с теми, которые он наследует от UIEventи Eventинтерфейсов.

Я нажал клавишу aво время обработки keyupсобытия

Прежде чем мы пойдем дальше, как насчет игровой площадки для изучения всех событий клавиатуры, их свойств, характеристик и так далее? Я думаю, будет здорово использовать его вместе с этой статьей и не только.

Просто наведите курсор на любое место в приложении, встроенном ниже, и введите любую клавишу, чтобы увидеть контекстную информацию о нем.

Если у вас есть какие-либо проблемы с доступом к указанной выше игровой площадке, вы можете получить доступ к этому инструменту прямо здесь: https://keyevents.netlify.app/ И вы можете найти исходный код демонстрации здесь: https://github.com/ atapas / js-keyevents-demo

События клавиатуры:

• keydown: Срабатывает при нажатии любой клавиши.
• keypress: Срабатывает только при нажатии клавиши, которая производит символьное значение. Например, если вы нажмете клавишу a, это событие сработает, поскольку клавиша aвыдает символьное значение 97. С другой стороны, это событие не сработает, когда вы нажмете shiftклавишу, поскольку оно не создает символьного значения.
• keyup: Срабатывает при отпускании любой клавиши.

Если все три события привязаны к элементу DOM, порядок запуска будет следующим:

1. Во-первых, нажатие клавиши
2. Затем нажмите клавишу (с условием, указанным выше)
3. Наконец, клавиша

Среди этих событий наиболее часто используемым событием клавиатуры является (или должно быть), keydownпотому что:

• keydownСобытие имеет максимальный охват ключей для получения контекстной информации. keypressСобытие работает только для подмножества ключей. Вы не можете захватить Alt, Ctrl, Shift, Meta и другие подобные ключевые события с помощью нажатия клавиши. Это также означает, что мы не можем вести огонь на нажатие клавиши событие с помощью комбинаций клавиш, таких как Ctrl Z, Shift Tabи так далее.
• Кроме того, событие является устаревшим. Это достаточно серьезная причина, чтобы этого избежать.keypress
• В то время как keydownи keyupсобытия охватывают все ключи и хорошо поддерживается большинством браузеров, есть несколько отличий, которые толкают keydownвперед keyup. Событие keydown запускается до того, как браузер обработает ключ, тогда как событие keyup запускается после того, как браузер обработает ключ. Если вы отмените событие нажатия клавиши (например, с помощью event.preventDefault()), действие браузера также будет отменено. В случае события нажатия клавиши действие браузера не будет отменено, даже если вы отменили событие.

В приведенном ниже примере мы используем, event.preventDefault()когда срабатывает событие keydownили keyup. Действие баузера по записи ключевых символов в текстовое поле не будет выполняться в случае, keydownно будет продолжаться для keyup.

[iframe src=https://stackblitz.com/edit/js-keycodes?embed=1]

keydown против keyup

Со всем этим объяснением, keydownсобытие является явным победителем и должно стать самым популярным (используемым) ключевым типом события.

Это вопрос на миллиард долларов! Самый короткий ответ – это зависит от обстоятельств. Но на чем? Это зависит от:

• Поддержка вашего приложения браузером
• Насколько унаследован код вашего приложения и насколько вы готовы провести рефакторинг?

Но прежде чем мы туда доберемся, давайте посмотрим на предварительный просмотр некоторых полезных свойств и методов KeyboardEventинтерфейса.

Последние три свойства устарели, и вам следует использовать это keyсвойство. keyСвойство имеет широкую поддержку браузера.

Поддерживается:

• Microsoft Edge: версия> = 79
• Firefox: версия> = 29
• Google Chrome: версия> = 51
• Safari: версия> = 10.1

Итак, пока вы не используете какие-либо старые браузеры, event.keyсвойства должно быть достаточно, чтобы вы могли идентифицировать ключ. Если вам необходимо поддерживать более старый браузер, лучшим вариантом будет event.whichсвойство.

window.addEventListener("keydown", function (event) {

  if (event.key !== undefined) {

  } else if (event.which !== undefined) {

  }
});

Если ваш код использует какие-либо из устаревших свойств и у вас есть возможность реорганизовать этот код, всегда лучше пойти на это.

Изменить ключи

Клавиши-модификаторы – это специальные клавиши на клавиатуре, которые изменяют поведение других клавиш по умолчанию. Control, Shiftи Alt– некоторые клавиши-модификаторы. Когда клавиша-модификатор комбинируется с другой клавишей, вы можете ожидать выполнения другого действия.

Например, если вы нажмете клавишу z, она должна вернуть клавишу и код для буквы z. Если вы объедините его с модификатором Controlи Control zнажмете, вы, скорее всего, получите Undoоперацию. Давайте посмотрим на это еще на нескольких примерах в следующем разделе.

Свойства, event.altKey, event.ctrlKey, event.shiftKey, и поэтому на помощь обнаружить, если клавиша – модификатор нажата.

Ключевые комбинации

Мы можем комбинировать несколько клавиш и выполнять действия на основе сочетаний клавиш. Фрагмент кода ниже показывает, как объединить Controlи zключ для определения действия:

document
  .getElementById("to_focus")
  .addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.key === "z") {

    }
});

Вот еще один пример, демонстрирующий еще несколько комбинаций клавиш. Пожалуйста, попробуйте:

Попробуйте комбинации клавиш

В таблице ниже показан список ключей со значениями event.which, event.keyи event.code.

Пожалуйста, обратите внимание:

• event.which устарел (или устарел)
• event.codeЗначение одинаково для строчных букв (а) и заглавных букв (A). Hoever theevent.key фактическое значение буквы.
• event.whichЗначение отличается в Firefox (FF) и другие браузеры для ключей, equal(=), semicolon(;), иdash/minus(-)

Так что насчет виртуальных клавиатур, например, использования наших мобильных телефонов или планшетов или любых других устройств ввода?

В спецификации сказано, что если виртуальная клавиатура имеет такое же расположение клавиш и функциональность, что и стандартная клавиатура, то она должна иметь соответствующий атрибут кода. В противном случае он не вернет правильное значение.

Подвести итоги:

• Вы можете использовать KeyboardEventдля захвата действий пользователя с помощью клавиатуры.
• Есть в основном три ключевых события, keydown, keypressиkeyup.
• Мы должны использовать keydownтип события в максимально возможной степени, поскольку он удовлетворяет большинству вариантов использования.
• Тип keypressсобытия устарел.
• Это event.whichсвойство устарело. Используйте event.keyвезде, где возможно.
• Если вам необходимо поддерживать старый браузер, используйте соответствующий резервный вариант для определения ключа.
• Мы можем комбинировать несколько ключей и выполнять операции.
• Виртуальная клавиатура поддерживает эти события, если ее раскладка и функции аналогичны стандартной клавиатуре.На этом пока все. Спасибо, что дочитали до этого места! Подключимся. Вы можете @ меня в Twitter (@tapasadhikary) с комментариями или не стесняйтесь подписываться.