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

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

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

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

С https://giphy.com/

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