Utilia
Категорії ▾
Мова: uk ▾

Коди клавіш JavaScript

Натисніть будь-яку клавішу, щоб побачити значення event.key, event.code, keyCode, which і location, модифікатори, історію натискань і таблицю кодів клавіш.

Натисніть «Почати захоплення клавіш» або клацніть у полі нижче, а потім натисніть будь-яку клавішу. Клацніть поза полем, щоб повернути клавіатуру сторінці.

event.key Натисніть клавішу keyCode – Tab, стрілки та комбінації клавіш тут теж захоплюються.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Увімкнені Lock-клавіші
–
Модифікатори
ctrlKey shiftKey altKey metaKey
Історія клавіш (найновіші зверху)
Історія клавіш (найновіші зверху)
ПодіяkeycodekeyCodelocationМодифікаториrepeat
Довідник кодів клавіш (US QWERTY)

Довідник кодів клавіш (US QWERTY)
keycodekeyCodelocationПримітка

значення key наведено для розкладки US без модифікаторів; інші розкладки видають інші символи для того самого code. keyCode і which застарілі, але досі широко використовуються.

Як дізнатися код клавіші

  1. Натисніть Почати захоплення клавіш або клацніть у великому полі. Кольорова рамка показує, що воно «слухає» клавіатуру.
  2. Натисніть будь-яку клавішу чи комбінацію. Великий дисплей показує значення key і застарілий keyCode, а картки нижче – event.key, event.code, event.keyCode, event.which, event.location, event.repeat та Увімкнені Lock-клавіші (Caps Lock, Num Lock, AltGraph).
  3. Бейджі Модифікатори загораються для ctrlKey, shiftKey, altKey і metaKey.
  4. Скопіюйте Фрагмент JavaScript для цієї клавіші. У полі Порівнювати за виберіть event.key, event.code або event.keyCode (застарілий).
  5. Прокрутіть Історію клавіш (найновіші зверху), щоб порівняти кілька натискань. Позначте Записувати також події keyup, щоб бачити й відпускання клавіш.
  6. Коли значення потрібне без натискання клавіші, перегляньте або відфільтруйте таблицю Довідник кодів клавіш (US QWERTY).

Поки поле в фокусі, стандартна дія кожної клавіші блокується, тож Tab, стрілки, Backspace чи Ctrl+S захоплюються, а не переміщують фокус або відкривають діалог. Клацніть будь-де поза полем, щоб повернути клавіатуру сторінці. Кілька комбінацій обробляє операційна система ще до того, як їх побачить браузер (Alt+Tab, Ctrl+Alt+Del, Cmd+Tab, часто Print Screen), тому жодна вебсторінка не може їх прочитати.

key, code чи keyCode: що використовувати?

Подія KeyboardEvent містить кілька значень, які відповідають на різні запитання:

Властивість Що вона повідомляє Приклад (клавіша A на AZERTY)
key Символ або названа клавіша з урахуванням розкладки й модифікаторів "a", "A" із Shift
code Фізичне розташування клавіші, незалежне від розкладки "KeyQ"
keyCode / which Застарілий номер, зазвичай код ASCII великої літери 65
location 0 – звичайна, 1 – ліва, 2 – права, 3 – цифрова панель 0

Використовуйте key, коли важливе значення: Enter для надсилання, Escape для закриття, «?» для відкриття довідки. Використовуйте code для ігор і комбінацій, що залежать від розташування клавіш, наприклад для керування WASD, яке має лишатися на тих самих клавішах і на французькій AZERTY, і на німецькій QWERTZ. У новому коді уникайте keyCode та which: вони застарілі, їхні значення для розділових знаків різняться між браузерами (Firefox надсилає 59 для крапки з комою, де Chrome надсилає 186), і вони не розрізняють лівий та правий Shift чи два Enter. Їх усе ж варто знати, коли ви підтримуєте старіший код, тому цей інструмент їх і показує.

Про фрагмент коду

Згенерований обробник порівнює саме ту клавішу, яку ви натиснули, разом із Ctrl, Alt та Meta. Для друкованих символів, порівнюваних за key, Shift опускається, бо він уже входить у значення: Shift+1 дає "!" у розкладці US. Коли ви натискаєте лише модифікатор, фрагмент не повторює його прапорець. Пам’ятайте, що metaKey – це Cmd на Mac і клавіша Windows на ПК, тому кросплатформні комбінації зазвичай перевіряють event.ctrlKey || event.metaKey.

Українська розкладка теж працює: key повертає кириличну літеру (наприклад, «ф»), а code лишається KeyA, бо описує фізичне місце клавіші. Тому для комбінацій, що мають працювати в будь-якій мові введення, надійніше порівнювати code.

Поширені запитання

Чому keyCode показує однакове число для різних символів?

keyCode ідентифікує клавішу, а не символ. Цифра 1 і «!» мають спільне значення 49, а «a» та «A» – 65. Щоб отримати справжній символ, читайте key.

Чому моя клавіша AZERTY показана як KeyQ?

code називає клавіші за їхнім розташуванням на клавіатурі US QWERTY. Клавіша з літерою A на французькій клавіатурі стоїть там, де Q на американській, тому її code – KeyQ, а key – «a».

Що означає «Dead» в event.key?

Це «мертва» клавіша, як-от ^ чи ¨ на французькій клавіатурі, яка чекає на наступну клавішу, щоб утворити літеру з діакритичним знаком. Кінцевий символ передає наступна подія клавіші або подія input текстового поля.

Чому event.repeat показує «так»?

Ви утримуєте клавішу, а операційна система надсилає автоматичні повтори. Перевіряйте event.repeat, щоб їх ігнорувати, наприклад щоб запускати комбінацію лише один раз.

Чи записується або надсилається те, що я натискаю?

Ні. Події клавіш читає ця сторінка у вашому браузері, і вони нікуди не надсилаються. Історія зникає, коли ви перезавантажуєте сторінку чи залишаєте її.

Схожі інструменти