Список клавиш JavaScript – коды ключа событий клавиш для ввода, пространства, заднего пространства и многого другого

Автор оригинала: FreeCodeCamp Community Member.

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

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

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

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

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

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

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

Интерфейс KeyboardEvent предоставляет информацию, использующую определенные константы, свойства и один метод (по состоянию на январь 2021). Это расширяет Уизмерие Интерфейс, который в конечном итоге расширяет Событие интерфейс.

В первую очередь три типа событий клавиатуры, КДУЩЬЮ , keypress и, keyup Отказ Мы можем получить контекстную информацию об этих событиях из KeyboardEvent Свойства интерфейса и методы.

Вы можете добавить каждый из этих типов событий в элемент HTML или Документ Объект, используя addeventListener метод. Вот пример прослушивания КДУЩЬЮ Событие на элементе которого ID, «Тип-здесь»:

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

elem.addEventListener("keydown", function (event) {
    // The parameter event is of the type KeyboardEvent
  	addRow(event);
});

В качестве альтернативы вы можете использовать методы обработчика, такие как, OnkeyDown (событие) , Onkeyup (событие) , OnkeyPress (событие) С элементом для обработки событий клавиатуры. Вот пример обращения с keyup Мероприятие на входном элементе:

Если вы распечатаете событие Объект в консоли браузера, вы увидите все его свойства и методы вместе с теми, которые он наследует от Уизмерие и Событие интерфейсы.

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

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

Вы также можете отфильтровать события, которые вы хотите, отменив флажки на вершине. Так что дайте это попробовать:

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

• КДУЩЬЮ : Он загоняет, когда любая клавиша нажата.
• keypress : Он пожаровал только тогда, когда ключ, который производит Значение символов нажимается вниз. Например, если вы нажмете ключ А это событие будет огонь, как ключ А производит значение символов 97 Отказ С другой стороны, это событие не будет огонь, когда вы нажмете Сдвиг Ключ, как он не вызывает значение символов.
• keyup : Он загоняет, когда любой ключ отпускается.

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

1. Во-первых, классна
2. Далее, клавиш (с указанным вышестоящим)
3. Последнее, keyup.

Среди этих событий наиболее используемое событие клавиатуры (или, должно быть) КДУЩЬЮ так как:

• КДУЩЬЮ Событие имеет максимальный охват ключей для получения контекстной информации. keypress Событие работает только для подмножества ключей. Вы не можете захватить Alt, Ctrl, Shift, Meta и другие похожие ключевые события с помощью клавиш. Это также означает, что мы не можем выстрелить событие KeyPress с клавишными комбинациями, такими как Ctrl Z , Shift Tab , и так далее.
• Более того, keypress событие был устарел. Это большая достаточная причина, чтобы избежать этого.
• Пока оба КДУЩЬЮ и keyup События охватывают все ключи и хорошо поддерживаются большинством браузеров, есть несколько различий, которые нажимают КДУЩЬЮ впереди keyup Отказ Событие клавиш перед браузером обрабатывает ключ, тогда как событие Keyup Fires после того, как браузер обрабатывает ключ. Если вы отмените событие KeyDown (скажем, используя Event.preventDefault () ), действие браузера тоже будет отменено. В случае события Keyup действие браузера не будет отменено, даже если вы отменили событие.

В приведенном ниже примере мы используем Event.PreventDefault () Когда КДУЩЬЮ или keyup события пожаров. Действие Bowser для записи ключевых символов в текстовое поле не будет выполнено в случае КДУЩЬЮ Но это будет продолжать случиться за keyup Отказ

Со всем этим объяснением, КДУЩЬЮ Мероприятие – четкий победитель и должен стать самым популярным (используемым) ключевым типом события.

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

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

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

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

Он поддерживается:

• Microsoft Edge: версия
• Firefox: версия
• Google Chrome: версия
• Safari: версия.1

Так что до тех пор, пока вы не используете какие-либо из более старых браузеров, Event.key Свойство должно быть достаточно для вас, чтобы определить ключ. Если вы должны поддерживать более старый браузер, будет лучший падж Event.which имущество.

window.addEventListener("keydown", function (event) {
  
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key
  } else if (event.which !== undefined) {
    // Handle the event with KeyboardEvent.which
  }
});

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

Клавиши модификатора

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

Например, если вы нажмете ключ z Предполагается вернуть ключ и код для буквы Z. Если вы сочетаете его с модификатором Контроль и нажмите Контроль Z Вы, скорее всего, получите Отменить операция. Давайте увидимся с несколькими примерами в следующем разделе.

Свойства, Event.Altkey , Event.Ctrlkey , Event.shiftkey И вот по справочнике обнаружить, была ли нажата клавиша модификатора.

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

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

document
  .getElementById("to_focus")
  .addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.key === "z") {
      // Do Something, may be an 'Undo' operation
    }
});

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

В приведенной ниже таблице показан список клавиш с Event.which , Event.key и event.code значения.

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

• Event.which был устарел (или устарел)
• event.code Значение одинаково для небольших букв (а) и заглавных букв (а). Гура Event.key Значение представляет собой фактическое письмо.
• Event.which Значение отличается в Firefox (FF) и других браузерах для клавиш, равный (=) , запястья (;) и Dash/minus (-)

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

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

Обобщить:

• Вы можете использовать KeyboardEvent Для захвата взаимодействий пользователей с помощью клавиатуры.
• В первую очередь три ключевых события, КДУЩЬЮ , keypress и keyup Отказ
• Мы должны использовать КДУЩЬЮ Тип события как можно больше, поскольку он удовлетворяет большинству случаев использования.
• keypress Тип события был устарел.
• Event.which Собственность была устарела. Использовать Event.key где это возможно.
• Если вы должны поддерживать более старый браузер, используйте соответствующие заправки для обнаружения ключей.
• Мы можем объединить несколько клавиш и выполнять операции.
• Виртуальная клавиатура поддерживает эти события до тех пор, пока макет и функции аналогичны стандартной клавиатуре.

Это все сейчас. Спасибо за чтение этого далеко! Давайте подключемся. Вы можете у меня на Twitter (@tapasadhikary) с комментариями или не стесняйтесь следовать.