Список кодов клавиш JavaScript – коды клавиш событий нажатия клавиш для ввода, пробела, возврата и т.д.
Клавиши-модификаторы – это специальные клавиши на клавиатуре, которые изменяют поведение других клавиш по умолчанию. 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.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.whichFirefox значение 181. Также FF предоставляет кодовое значение как,VolumeMute |
|
| громкость звука убавить | 174 | AudioVolumeDown | ⚠️ В event.whichFirefox значение 182. Также FF предоставляет кодовое значение как,VolumeDown |
|
| громкость звука | 175 | AudioVolumeUp | ⚠️ В event.whichFirefox значение 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 | ‘ | Цитата |
Пожалуйста, обратите внимание:
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) с комментариями или не стесняйтесь подписываться.
С https://giphy.com/
Научитесь программировать бесплатно. Учебная программа с открытым исходным кодом freeCodeCamp помогла более 40 000 человек получить работу в качестве разработчиков.Начать