Список кодов клавиш JavaScript – коды клавиш событий нажатия клавиш для ввода, пробела, возврата и т.д.
События клавиатуры JavaScript помогают фиксировать действия пользователя с клавиатурой.
Как и многие другие события JavaScript, KeyboardEvent интерфейс предоставляет все необходимые свойства и методы для обработки каждого нажатия клавиши, которое пользователь делает с помощью клавиатуры.
Было написано много статей о том, как они работают и как их использовать. В то же время W3.org продолжает обновлять спецификацию, вводя новые свойства, исключая существующие и отмечая определенный код как устаревший.
Из-за этого веб-разработчикам важно продолжать изучать KeyboardEvent интерфейс, чтобы знать, что именно им следует использовать, а что больше не актуально.
В этой статье мы узнаем о:
Надеюсь, тебе понравится.
Интерфейс KeyboardEvent предоставляет информацию с использованием определенных констант, свойств и одного метода (по состоянию на январь 2021 г.). Он расширяет UIEvent интерфейс, который в конечном итоге расширяет Event интерфейс.
Вы можете добавить каждый из этих типов событий к элементу или document объекту HTML с помощью addEventListener метода. Вот пример прослушивания keydown события для элемента с идентификатором ‘type-here’:
Если вы печатаете event объект в консоли браузера, вы увидите все его свойства и методы наряду с теми, которые он наследует от UIEvent и Event интерфейсов.
Я нажал клавишу a во время обработки keyup события
Прежде чем мы пойдем дальше, как насчет игровой площадки для изучения всех событий клавиатуры, их свойств, характеристик и так далее? Я думаю, будет здорово использовать его вместе с этой статьей и не только.
Просто наведите курсор на любое место в приложении, встроенном ниже, и введите любую клавишу, чтобы увидеть контекстную информацию о нем.
Вы также можете отфильтровать нужные события, сняв флажки вверху. Так что попробуйте:
Игровая площадка событий клавиатуры
Если у вас есть какие-либо проблемы с доступом к указанной выше игровой площадке, вы можете получить доступ к этому инструменту прямо здесь: https://keyevents.netlify.app/ И вы можете найти исходный код демонстрации здесь: https://github.com/ atapas / js-keyevents-demo
Если все три события привязаны к элементу DOM, порядок запуска будет следующим:
Среди этих событий наиболее часто используемым событием клавиатуры является (или должно быть), keydown потому что:
keydown против keyup
Со всем этим объяснением, keydown событие является явным победителем и должно стать самым популярным (используемым) ключевым типом события.
Это вопрос на миллиард долларов! Самый короткий ответ – это зависит от обстоятельств. Но на чем? Это зависит от:
Но прежде чем мы туда доберемся, давайте посмотрим на предварительный просмотр некоторых полезных свойств и методов KeyboardEvent интерфейса.
Последние три свойства устарели, и вам следует использовать это key свойство. key Свойство имеет широкую поддержку браузера.
Итак, пока вы не используете какие-либо старые браузеры, event.key свойства должно быть достаточно, чтобы вы могли идентифицировать ключ. Если вам необходимо поддерживать более старый браузер, лучшим вариантом будет event.which свойство.
Если ваш код использует какие-либо из устаревших свойств и у вас есть возможность реорганизовать этот код, всегда лучше пойти на это.
Изменить ключи
Ключевые комбинации
Мы можем комбинировать несколько клавиш и выполнять действия на основе сочетаний клавиш. Фрагмент кода ниже показывает, как объединить Control и z ключ для определения действия:
Вот еще один пример, демонстрирующий еще несколько комбинаций клавиш. Пожалуйста, попробуйте:
Попробуйте комбинации клавиш
| Имя ключа | event.which | event.key | event.code | Ноты |
|---|---|---|---|---|
| Backspace | 8 | Backspace | Backspace | |
| вкладка | 9 | Вкладка | Вкладка | |
| войти | 13 | Войти | Войти | |
| сдвиг (слева) | 16 | сдвиг | ShiftLeft | event.shiftKey правда |
| сдвиг (вправо) | 16 | сдвиг | ShiftRight | event.shiftKey правда |
| ctrl (слева) | 17 | Контроль | ControlLeft | event.ctrlKey правда |
| ctrl (справа) | 17 | Контроль | ControlRight | event.ctrlKey правда |
| alt (слева) | 18 | Все | AltLeft | event.altKey правда |
| alt (справа) | 18 | Все | AltRight | event.altKey правда |
| пауза / перерыв | 19 | Пауза | Пауза | |
| Caps Lock | 20 | CapsLock | CapsLock | |
| побег | 27 | Побег | Побег | |
| пространство | 32 | Космос | event.key Значение представляет собой единое пространство. | |
| страница вверх | 33 | PageUp | PageUp | |
| листать вниз | 34 | Листать вниз | Листать вниз | |
| конец | 35 | Конец | Конец | |
| Главная | 36 | Главная | Главная | |
| стрелка влево | 37 | Стрелка влево | Стрелка влево | |
| стрелка вверх | 38 | ArrowUp | ArrowUp | |
| правая стрелка | 39 | Стрелка вправо | Стрелка вправо | |
| стрелка вниз | 40 | Стрелка вниз | Стрелка вниз | |
| Снимок экрана | 44 | Снимок экрана | Снимок экрана | |
| вставить | 45 | Вставить | Вставить | |
| удалять | 46 | удалять | удалять | |
| 0 | 48 | 0 | Цифра 0 | |
| 1 | 49 | 1 | Цифра 1 | |
| 2 | 50 | 2 | Цифра 2 | |
| 3 | 51 | 3 | Цифра 3 | |
| 4 | 52 | 4 | Цифра 4 | |
| 5 | 53 | 5 | Цифра 5 | |
| 6 | 54 | 6 | Цифра 6 | |
| 7 | 55 | 7 | Цифра 7 | |
| 8 | 56 | 8 | Цифра 8 | |
| 9 | 57 | 9 | Цифра 9 | |
| а | 65 | а | KeyA | |
| б | 66 | б | KeyB | |
| c | 67 | c | KeyC | |
| d | 68 | d | KeyD | |
| является | 69 | является | KeyE | |
| ж | 70 | ж | KeyF | |
| g | 71 | g | KeyG | |
| час | 72 | час | KeyH | |
| i | 73 | i | KeyI | |
| j | 74 | j | KeyJ | |
| k | 75 | k | KeyK | |
| л | 76 | л | KeyL | |
| m | 77 | m | KeyM | |
| п | 78 | п | KeyN | |
| О | 79 | О | KeyO | |
| p | 80 | p | KeyP | |
| q | 81 | q | KeyQ | |
| р | 82 | р | KeyR | |
| s | 83 | s | KeyS | |
| т | 84 | т | KeyT | |
| u | 85 | u | KeyU | |
| v | 86 | v | KeyV | |
| в | 87 | в | KeyW | |
| Икс | 88 | Икс | KeyX | |
| и | 89 | и | KeyY | |
| с участием | 90 | с участием | KeyZ | |
| клавиша левого окна | 91 | Мета | MetaLeft | event.metaKey правда |
| клавиша правого окна | 92 | Мета | MetaRight | event.metaKey правда |
| клавиша выбора (контекстное меню) | 93 | Контекстное меню | Контекстное меню | |
| цифровая клавиатура 0 | 96 | 0 | Numpad0 | |
| цифровая клавиатура 1 | 97 | 1 | Numpad1 | |
| цифровая клавиатура 2 | 98 | 2 | Numpad2 | |
| цифровая клавиатура 3 | 99 | 3 | Numpad3 | |
| цифровая клавиатура 4 | 100 | 4 | Numpad4 | |
| цифровая клавиатура 5 | 101 | 5 | Numpad5 | |
| цифровая клавиатура 6 | 102 | 6 | Numpad6 | |
| цифровая клавиатура 7 | 103 | 7 | Numpad7 | |
| цифровая клавиатура 8 | 104 | 8 | Numpad8 | |
| цифровая клавиатура 9 | 105 | 9 | Numpad9 | |
| умножать | 106 | * | NumpadMultiply | |
| Добавить | 107 | + | NumpadAdd | |
| вычесть | 109 | – | Numpad: вычесть | |
| десятичная точка | 110 | . | NumpadDecimal | |
| делить | 111 | / | NumpadDivide | |
| f1 | 112 | F1 | F1 | |
| f2 | 113 | F2 | F2 | |
| f3 | 114 | F3 | F3 | |
| f4 | 115 | F4 | F4 | |
| f5 | 116 | F5 | F5 | |
| f6 | 117 | F6 | F6 | |
| f7 | 118 | F7 | F7 | |
| f8 | 119 | F8 | F8 | |
| f9 | 120 | F9 | F9 | |
| f10 | 121 | F10 | F10 | |
| f11 | 122 | F11 | F11 | |
| f12 | 123 | F12 | F12 | |
| числовой замок | 144 | NumLock | NumLock | |
| блокировка прокрутки | 145 | ScrollLock | ScrollLock | |
| отключение звука | 173 | AudioVolumeMute | ⚠️ В event.which Firefox значение 181. Также FF предоставляет кодовое значение как, VolumeMute | |
| громкость звука убавить | 174 | AudioVolumeDown | ⚠️ В event.which Firefox значение 182. Также FF предоставляет кодовое значение как, VolumeDown | |
| громкость звука | 175 | AudioVolumeUp | ⚠️ В event.which Firefox значение 183. Также FF предоставляет кодовое значение как, VolumeUp | |
| проигрыватель медиа | 181 | LaunchMediaPlayer | ⚠️ Значение ️ event.which в Firefox равно 0 (без значения). Также FF предоставляет кодовое значение как, MediaSelect | |
| запустить приложение 1 | 182 | LaunchApplication1 | ⚠️ Значение ️ event.which в Firefox равно 0 (без значения). Также FF предоставляет кодовое значение как, LaunchApp1 | |
| запустить приложение 2 | 183 | LaunchApplication2 | ⚠️ Значение ️ event.which в Firefox равно 0 (без значения). Также FF предоставляет кодовое значение как, LaunchApp2 | |
| точка с запятой | 186 | ; | Точка с запятой | ⚠️ event.which Значение 59 в Firefox |
| знак равенства | 187 | Равно | ⚠️ event.which Значение 61 в Firefox | |
| пункт | 188 | , | Пункт | |
| рывок | 189 | – | Minus | ⚠️ event.which Значение 173 в Firefox |
| period | 190 | . | Period | |
| косая черта | 191 | / | Слэш | |
| Обратная цитата / серьезный акцент | 192 | ` | Обратная цитата | |
| открытая скобка | 219 | [ | Кронштейн: Левый | |
| обратная косая черта | 220 | Обратная косая черта | ||
| закрывающая скобка | 221 | ] | Кронштейн Правый | |
| одиночная кавычка | 222 | ‘ | Цитата |
Пожалуйста, обратите внимание:
Так что насчет виртуальных клавиатур, например, использования наших мобильных телефонов или планшетов или любых других устройств ввода?
В спецификации сказано, что если виртуальная клавиатура имеет такое же расположение клавиш и функциональность, что и стандартная клавиатура, то она должна иметь соответствующий атрибут кода. В противном случае он не вернет правильное значение.
На этом пока все. Спасибо, что дочитали до этого места! Подключимся. Вы можете @ меня в Twitter (@tapasadhikary) с комментариями или не стесняйтесь подписываться.
Научитесь программировать бесплатно. Учебная программа с открытым исходным кодом freeCodeCamp помогла более 40 000 человек получить работу в качестве разработчиков.Начать
События клавиатуры в JavaScript
При вводе с клавиатуры в javascript возникает сразу несколько событий, которые позволяют отследить коды нажатых клавиш и получить дополнительную полезную информацию для полного контроля над устройством ввода. Перейдём к теоретической и практической части.
События клавиатуры
В JS для клавиатуры используется 3 основных события:
Для избежания повторных вызовов «keydown» и «keypress» используйте свойство «repeat». Подробнее рассмотрим его позже.
В примерах использовался метод «addEventListener», но можно встретить и другие варианты:
Получение свойств событий
Для получения информации о клавише обратитесь к свойствам объекта «event».
Свойства key и keyCode
key — возвращает значение нажатой клавиши в виде строки. Например, «F», «5» или «Enter».
keyCode — возвращает числовой код. Для события «keypress» вернёт ASCII-код нажатого символа.
Примечание. Цифры на верхнем и боковом блоке клавиатуры имеют разные «keyCode».
Коды основных функциональных клавиш:
| Клавиша | Key | keyCode |
|---|---|---|
| Ввод | Enter | 13 |
| Стереть | Backspace | 8 |
| Удалить | Delete | 46 |
| Пробел | Space | 32 |
| Табулятор | Tab | 9 |
| Esc | Escape | 27 |
| Стрелка влево | ArrowLeft | 37 |
| Стрелка вверх | ArrowUp | 38 |
| Стрелка вправо | ArrowRight | 39 |
| Стрелка вниз | ArrowDown | 40 |
| Shift | Shift | 16 |
| Ctrl | Control | 17 |
| Alt | Alt | 18 |
Хорошей практикой в JavaScript считается использование «key», а не «keyCode». Это повышает читаемость кода и избавляет от необходимости запоминать соответствие кодов их значениям.
Свойства code и charCode
Актуальны только для события «keypress».
Не поддерживаются IE и старыми версиями других браузеров.
Свойства altKey, ctrlKey, shiftKey
Свойство type
Возвращает тип события в виде строки. Может использоваться, когда один обработчик применяется сразу для нескольких событий.
Свойство repeat
Возвращает логическое «true», если событие уже один раз отработало и автоматически вызывается снова. Подобная ситуация возникает при зажатии клавиши на длительное время — «keydown» и «keypress» начинают срабатывать повторно.
Пример проверки ввода в Input
Рассмотрим небольшой пример, в котором разрешим ввод в текстовое поле только нуля и единицы. Учитываем возможность стирания, удаления и табуляции.
Метод «preventDefault()» запрещает действие по умолчанию.
Применение предыдущего обработчика ко всем текстовыми полями на странице:
Коды клавиш
Поставьте курсор в поле ввода и нажмите любую клавишу:
Клавиатура: keydown и keyup
Прежде чем перейти к клавиатуре, обратите внимание, что на современных устройствах есть и другие способы «ввести что-то». Например, распознавание речи (это особенно актуально на мобильных устройствах) или Копировать/Вставить с помощью мыши.
События клавиатуры же должны использоваться, если мы хотим обрабатывать взаимодействие пользователя именно с клавиатурой (в том числе виртуальной). К примеру, если нам нужно реагировать на стрелочные клавиши Up и Down или горячие клавиши (включая комбинации клавиш).
Тестовый стенд
Для того, чтобы лучше понять, как работают события клавиатуры, можно использовать тестовый стенд ниже.
Сфокусируйтесь на поле и нажмите какую-нибудь клавишу.
События keydown и keyup
Событие keydown происходит при нажатии клавиши, а keyup – при отпускании.
event.code и event.key
Свойство key объекта события позволяет получить символ, а свойство code – «физический код клавиши».
К примеру, одну и ту же клавишу Z можно нажать с клавишей Shift и без неё. В результате получится два разных символа: z в нижнем регистре и Z в верхнем регистре.
Свойство event.key – это непосредственно символ, и он может различаться. Но event.code всегда будет тот же:
| Клавиша | event.key | event.code |
|---|---|---|
| Z | z (нижний регистр) | KeyZ |
| Shift + Z | Z (Верхний регистр) | KeyZ |
У каждой клавиши есть код, который зависит от её расположения на клавиатуре. Подробно о клавишных кодах можно прочитать в спецификации о кодах событий UI.
Существует несколько широко распространённых раскладок клавиатуры, и в спецификации приведены клавишные коды к каждой из них.
Можно их прочитать в разделе спецификации, посвящённом буквенно-цифровым клавишам или просто нажмите нужную клавишу на тестовом стенде выше и посмотрите.
Выглядит очевидно, но многие всё равно ошибаются.
| Клавиша | event.key | event.code |
|---|---|---|
| F1 | F1 | F1 |
| Backspace | Backspace | Backspace |
| Shift | Shift | ShiftRight или ShiftLeft |
Обратите внимание, что event.code точно указывает, какая именно клавиша нажата. Так, большинство клавиатур имеют по две клавиши Shift : слева и справа. event.code уточняет, какая именно из них была нажата, в то время как event.key сообщает о «смысле» клавиши: что вообще было нажато ( Shift ).
Допустим, мы хотим обработать горячую клавишу Ctrl + Z (или Cmd + Z для Mac). Большинство текстовых редакторов к этой комбинации подключают действие «Отменить». Мы можем поставить обработчик событий на keydown и проверять, какая клавиша была нажата.
С другой стороны, с event.code тоже есть проблемы. На разных раскладках к одной и той же клавише могут быть привязаны разные символы.
Например, вот схема стандартной (US) раскладки («QWERTY») и под ней немецкой («QWERTZ») раскладки (из Википедии):
Для одной и той же клавиши в американской раскладке значение event.code равно «Z», в то время как в немецкой «Y».
Звучит очень странно, но это и в самом деле так. В спецификации прямо упоминается такое поведение.
Чтобы отслеживать символы, зависящие от раскладки, event.key надёжнее.
С другой стороны, преимущество event.code заключается в том, что его значение всегда остаётся неизменным, будучи привязанным к физическому местоположению клавиши, даже если пользователь меняет язык. Так что горячие клавиши, использующие это свойство, будут работать даже в случае переключения языка.
Хотим поддерживать клавиши, меняющиеся при раскладке? Тогда event.key – верный выбор.
Или мы хотим, чтобы горячая клавиша срабатывала даже после переключения на другой язык? Тогда event.code может быть лучше.
Автоповтор
Действия по умолчанию
Действия по умолчанию весьма разнообразны, много чего можно инициировать нажатием на клавиатуре.
Предотвращение стандартного действия с помощью event.preventDefault() работает практически во всех сценариях, кроме тех, которые происходят на уровне операционной системы. Например, комбинация Alt + F4 инициирует закрытие браузера в Windows, что бы мы ни делали в JavaScript.
Добавим ему немного больше свободы:
Теперь стрелочки и удаление прекрасно работают.
«Дела минувших дней»
Итого
Главные свойства для работы с клавиатурными событиями:
В прошлом события клавиатуры иногда использовались для отслеживания ввода данных пользователем в полях формы. Это ненадёжно, потому как ввод данных не обязательно может осуществляться с помощью клавиатуры. Существуют события input и change специально для обработки ввода (рассмотренные позже в главе События: change, input, cut, copy, paste). Они срабатывают в результате любого ввода, включая Копировать/Вставить мышью и распознавание речи.
События клавиатуры же должны использоваться только по назначению – для клавиатуры. Например, чтобы реагировать на горячие или специальные клавиши.
Задачи
Отследить одновременное нажатие
Например, код ниже выведет alert при одновременном нажатии клавиш «Q» и «W» (в любом регистре, в любой раскладке)
Первый позволяет узнать, какой символ содержит строка под определенным индексом.
Второй позволяет узнать, какой код имеет символ строки под определенным индексом.
Рассмотрим пример с произвольным строковым значением переменной (или с произвольным объектом String ).
В JavaScript каждый символ имеет код, который может быть использован в некоторых случаях. Далее мы проработаем этот момент.
Для примера вернемся к букве «р» из предыдущего примера.
Она имеет Юникод U+0440 и HTML-код р
Теперь, при помощи метода charCodeAt выясним, какие коды имеют русские заглавные и строчные буквы?
2. При этом проверить, нет ли в имени помимо русских букв других символов.
3. Затем при написании имени, нужно будет пробовать вводить одну/несколько латинских букв вместо русских.
Для решения этой задачи нужно будет вспомнить тему циклов и просмотреть заметку логические операторы И и ИЛИ в Javascript. Также нужен будет метод prompt объекта Window.
Для составления условия нужен будет диапазон кодов для всех букв русского алфавита (заглавных и строчных). См. предыдущий пример.
Итак, в этом примере при помощи цикла while, условия ИЛИ и метода charCodeAt мы поочереди проверили каждую букву в имени на предмет попадания ее КОДа в диапазон кодов для всех букв русского алфавита.
Эту же задачу можно реализовать при помощи цикла for. Смотрите пример ниже.
Лексический синтаксис
Спецсимволы
Спецсимволы не имеют визуального представления, однако используются для управления интерпретацией текста.
| Code point | Name | Abbreviation | Description |
|---|---|---|---|
| U+200C | Zero width non-joiner | Размещается между символами во избежание их соединений в лигатуры для некоторых языков (Wikipedia) | |
| U+200D | Zero width joiner | Размещается между символами, которые не могли бы нормально объединиться для того, чтобы символы отрисовывались, используя их соединительную форму в некоторых языках (Wikipedia) | |
| U+FEFF | Byte order mark | Используется вначале скрипта для того, чтобы пометить Юникод и порядок байтов (Wikipedia) |
Пробелы
Пробельные символы улучшают читабельность исходного текста и разделяет токены друг от друга. Пробельные символы обычно не обязательны для функционирования кода. Утилиты для уменьшения объёма кода часто удаляют пробельные символы, чтобы уменьшить объем кода.
| Code point | Name | Abbreviation | Description | Escape sequence |
|---|---|---|---|---|
| U+0009 | Character tabulation | Горизонтальная табуляция | \t | |
| U+000B | Line tabulation | Вертикальная табуляция | \v | |
| U+000C | Form feed | Символ контроля разрыва страницы (Wikipedia) | \f | |
| U+0020 | Space | Обычный пробел | ||
| U+00A0 | No-break space | |||
| Others | Other Unicode space characters | Другие символы в Юникоде на Википедии |
Окончание строк
В дополнение к пробельным символам, символы окончания строк тоже используются для читабельности исходного кода. Однако, в некоторых случаях, символы окончания строк могут влиять на выполнение JavaScript-кода, т.к. есть некоторые места, где они запрещены.
Окончания строк также затрагивают процесс автоматического проставления точки с запятой. Также окончания строк попадают под условия регулярных выражений при поиске \s класса.
В ECMAScript, в качестве окончания строк можно использовать только ниже перечисленные Юникод символы. Другие символы окончания строк будут интерпретированы, как пробельные символы (например, Next Line, NEL, U+0085 будут интерпретироваться, как пробельные символы).
| Code point | Name | Abbreviation | Description | Escape sequence |
|---|---|---|---|---|
| U+000A | Line Feed | Новая строка в UNIX системах. | \n | |
| U+000D | Carriage Return | Новая строка в Commodore и ранних Mac systems. | \r | |
| U+2028 | Line Separator | Wikipedia | ||
| U+2029 | Paragraph Separator |