JavaScript

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

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

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

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

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

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

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

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

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

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

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

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интерфейсов.

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

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

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

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

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

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

Игровая площадка событий клавиатуры

Если у вас есть какие-либо проблемы с доступом к указанной выше игровой площадке, вы можете получить доступ к этому инструменту прямо здесь: 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интерфейса.

Свойство / МетодОписаниеУстаревший / устаревший
altKeyВозвращает логическое значение (истина / ложь). Значение – trueкогда Altнажата клавиша.Нет
ctrlKeyВозвращает логическое значение (истина / ложь). Значение – trueкогда Controlнажата клавиша.Нет
shiftKeyВозвращает логическое значение (истина / ложь). Значение – trueкогда Shiftнажата клавиша.Нет
metaKeyВозвращает логическое значение (истина / ложь). Значение – это trueкогда Metaнажата любая из клавиш.Нет
кодКодовое значение физического ключа.Нет
ключФактическое значение нажатой клавиши.Нет
getModifierState() методВозвращает логическое значение (истина / ложь). Значение trueуказывает на onсостояние этих клавиш, CapsLock, NumLock, Alt, Control, Shift, Metaи т.д.Нет
charCodeВозвращает значение Unicode. Это устарело, и keyвместо этого мы должны использовать свойство.да
ключевой кодВозвращает нечисловой код нажатого значения. Это устарело, и keyвместо этого мы должны использовать свойство.да
которыйВозвращает нечисловой код нажатого значения. Это устарело, и keyвместо этого мы должны использовать свойство.да

Последние три свойства устарели, и вам следует использовать это 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.whichevent.keyevent.codeНоты
Backspace8BackspaceBackspace
вкладка9ВкладкаВкладка
войти13ВойтиВойти
сдвиг (слева)16сдвигShiftLeftevent.shiftKey правда
сдвиг (вправо)16сдвигShiftRightevent.shiftKey правда
ctrl (слева)17КонтрольControlLeftevent.ctrlKey правда
ctrl (справа)17КонтрольControlRightevent.ctrlKey правда
alt (слева)18ВсеAltLeftevent.altKey правда
alt (справа)18ВсеAltRightevent.altKey правда
пауза / перерыв19ПаузаПауза
Caps Lock20CapsLockCapsLock
побег27ПобегПобег
пространство32Космосevent.keyЗначение представляет собой единое пространство.
страница вверх33PageUpPageUp
листать вниз34Листать внизЛистать вниз
конец35КонецКонец
Главная36ГлавнаяГлавная
стрелка влево37Стрелка влевоСтрелка влево
стрелка вверх38ArrowUpArrowUp
правая стрелка39Стрелка вправоСтрелка вправо
стрелка вниз40Стрелка внизСтрелка вниз
Снимок экрана44Снимок экранаСнимок экрана
вставить45ВставитьВставить
удалять46удалятьудалять
0480Цифра 0
1491Цифра 1
2502Цифра 2
3513Цифра 3
4524Цифра 4
5535Цифра 5
6546Цифра 6
7557Цифра 7
8568Цифра 8
9579Цифра 9
а65аKeyA
б66бKeyB
c67cKeyC
d68dKeyD
является69являетсяKeyE
ж70жKeyF
g71gKeyG
час72часKeyH
i73iKeyI
j74jKeyJ
k75kKeyK
л76лKeyL
m77mKeyM
п78пKeyN
О79ОKeyO
p80pKeyP
q81qKeyQ
р82рKeyR
s83sKeyS
т84тKeyT
u85uKeyU
v86vKeyV
в87вKeyW
Икс88ИксKeyX
и89иKeyY
с участием90с участиемKeyZ
клавиша левого окна91МетаMetaLeftevent.metaKey правда
клавиша правого окна92МетаMetaRightevent.metaKey правда
клавиша выбора (контекстное меню)93Контекстное менюКонтекстное меню
цифровая клавиатура 0960Numpad0
цифровая клавиатура 1971Numpad1
цифровая клавиатура 2982Numpad2
цифровая клавиатура 3993Numpad3
цифровая клавиатура 41004Numpad4
цифровая клавиатура 51015Numpad5
цифровая клавиатура 61026Numpad6
цифровая клавиатура 71037Numpad7
цифровая клавиатура 81048Numpad8
цифровая клавиатура 91059Numpad9
умножать106*NumpadMultiply
Добавить107+NumpadAdd
вычесть109Numpad: вычесть
десятичная точка110.NumpadDecimal
делить111/NumpadDivide
f1112F1F1
f2113F2F2
f3114F3F3
f4115F4F4
f5116F5F5
f6117F6F6
f7118F7F7
f8119F8F8
f9120F9F9
f10121F10F10
f11122F11F11
f12123F12F12
числовой замок144NumLockNumLock
блокировка прокрутки145ScrollLockScrollLock
отключение звука173AudioVolumeMute⚠️ В event.whichFirefox значение 181. Также FF предоставляет кодовое значение как,VolumeMute
громкость звука убавить174AudioVolumeDown⚠️ В event.whichFirefox значение 182. Также FF предоставляет кодовое значение как,VolumeDown
громкость звука175AudioVolumeUp⚠️ В event.whichFirefox значение 183. Также FF предоставляет кодовое значение как,VolumeUp
проигрыватель медиа181LaunchMediaPlayer⚠️ Значение ️ event.whichв Firefox равно 0 (без значения). Также FF предоставляет кодовое значение как,MediaSelect
запустить приложение 1182LaunchApplication1⚠️ Значение ️ event.whichв Firefox равно 0 (без значения). Также FF предоставляет кодовое значение как,LaunchApp1
запустить приложение 2183LaunchApplication2⚠️ Значение ️ event.whichв Firefox равно 0 (без значения). Также FF предоставляет кодовое значение как,LaunchApp2
точка с запятой186;Точка с запятой⚠️ event.whichЗначение 59 в Firefox
знак равенства187Равно⚠️ event.whichЗначение 61 в Firefox
пункт188,Пункт
рывок189Minus⚠️ event.whichЗначение 173 в Firefox
period190.Period
косая черта191/Слэш
Обратная цитата / серьезный акцент192`Обратная цитата
открытая скобка219[Кронштейн: Левый
обратная косая черта220Обратная косая черта
закрывающая скобка221]Кронштейн Правый
одиночная кавычка222Цитата

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

  • 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) с комментариями или не стесняйтесь подписываться.

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

С https://giphy.com/



Научитесь программировать бесплатно. Учебная программа с открытым исходным кодом freeCodeCamp помогла более 40 000 человек получить работу в качестве разработчиков.Начать

Источник записи: https://www.freecodecamp.org

Похожие сообщения
JavaScriptWEBПолезные сайты

Изучаем основы Vue с Vue 3

CSSJavaScript

Анимация объекта при прокрутке

GitHubJavaScriptjQueryWEBWordPressВсе для разработки плагиновПлагины

Улучшение внутренних ссылок с помощью предварительного просмотра всплывающей подсказки

JavaScriptjQueryWEBWEB - PHP

HTTP, Ajax Polling, SSE, Websocket - связь клиент-сервер

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *