Список кодов клавиш 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, реализовать нажатие на кнопку можно разными способами. Давайте предположим, что у нас на странице есть некая кнопка.
Она пока никак не реагирует потому, что мы не повесили на нее никакого события. И давайте рассмотрим первый вариант.
Функция по нажатию кнопки в JavaScript
Событие по клику на кнопку мы создали, но можно сделать то же самое, только напишем функцию, с именем.
А к кнопке добавим эту функцию:
Вывод на страницу по клику на кнопку в JS
Соответственно по нажатию на кнопку в JavaScript можно делать не только всплывающий alert, но и все, что угодно, передавать данные на сервер, изменять элементы на странице, удалять, копировать и много чего еще. Давайте рассмотрим еще один пример. напишем небольшую функцию, которая будет срабатывать по клику и выводить на страницу случайное число. Для этого под кнопкой добавим элемент DIV с классом sum, в котором будем выводить результат работы JavaScript функции.
function randomSum(min, max)
Для кнопки добавим эту функцию по нажатию:
По нажатию на кнопку под ней будет выведено четырехзначное число от 1000 до 9999 в случайном порядке. Это мы указали в специальных параметрах min и max.
Нажатие правой кнопкой мыши в JS
Событие клика правой кнопкой мыши в JavaScript отличается от левой и по умолчанию вызывает стандартное контекстное меню браузера. Но мы его можем изменить. Во-первых убрать, а во-вторых задать свое действие.
Запрещаем вывод контекстного меню при клике правой кнопкой мыши:
Это простейший вызов функции по клику в JavaScript и усваивается без особых трудностей. В дальнейшем рекомендую изучать более сложные функции, которые делают различные операции. Например считают сумму, как в калькуляторе расчета стоимости. Надеюсь этот урок оказался для вас полезным. Если остались вопросы, вы всегда можете задать их в комментариях.
Читайте также:
Как всегда интересно и доступно. Намедни, писал калькулятор расчёта цены металлической решётки на JS и пытался вызвать срабатывание двух фуекций одновременно по нажатию кнопки. Запускались два массива радиокнопок с разными именами и дальше использовались для расчётов. Не получилось и даже пишут, что это не возможно.
Интересует ваше мнение вызова нескольких функций по нажатию только одной кнопки.
Проблем с запуском 2-х функций в JS возникать не должно. Просто эти функции нужно написать отдельно. Возможно у вас какой-то конфликт в коде.
Имеется в виду есть 2 групы или более радио кнопок с возможностью выбора только одной кнопки в каждой группе по параметру value. Хотелось бы написать один код, в котором поставив чекбоксы в радио кнопках использовать их значениня value в этом коде дальше по нажатию кнопки РАССЧИТАТЬ. Каждая группа кнопок перебирается в цикле и определяется значение value одной и второй группы. На самом деле, записав оба цикла последовательно в коде не удаётся далье воспользоваться полученными значениями велью. Если радио кнопки не зависимые, тогда всё в порядке, а если с одним именем не получается.
Не совсем понял. Можно попробовать использовать this и написать один цикл.
Спасибо. Буду пробовать.
Всплывает модальное окно подписки и зависает. Дальше не реагирует.
Доброго времени суток! а как быть в случае когда надо на одной странице несколько раз выполнить одинаковый код обновление div-а с помощью Ajax?
Пример: есть страница строки/столбцы. В одном из столбцов (для каждой строки) есть номер и ттн. По нажатию на кнопку происходит отправка данных. php возвращает некий ответ. Этот ответ отображается в div под кнопкой отправки. Но такая конструкция срабатывает только один раз для первого элемента
$.ajax( <
type: «POST»,
url: url,
data: form.serialize(),
success: function(html) <
$(»).html(html);>>);
return false;
>);
Вам скорее всего нужен формат Json. Об этот я писал здесь.
Данные отправляются через эту конструкцию нормально. php тоже отрабатывает возвращая нужную строку. После в строке success результат от php присваивается некому div-у на странице. Но если это код повторить несколько раз на одной странице то все, которые ниже уже не работают (я так понимаю, что это из за уникальности id-шников)
Соответственно id должны быть разными.
События клавиатуры в 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» (в любом регистре, в любой раскладке)
