JS властивість Event.code

Загальний опис

code — це властивість об'єкта KeyboardEvent, яка повертає унікальний ідентифікатор для кожної клавіші на клавіатурі, незалежно від символу, який ця клавіша представляє. На відміну від key, яка визначає символ натиснутої клавіші, code ідентифікує фізичне розташування клавіші на клавіатурі. Наприклад, незалежно від того, чи натискається ліва чи права клавіша Shift, code поверне відповідно ShiftLeft або ShiftRight.

Ця властивість особливо корисна для обробки гарячих клавіш та створення кастомних комбінацій клавіш у додатках. Наприклад, для створення різних дій на основі того, яка саме клавіша Alt, Ctrl або Shift була натиснута, code є надійним вибором, оскільки воно не змінюється в залежності від розкладки клавіатури. Слід зазначити, що code повертає рядок, який відповідає назві клавіші, наприклад, KeyA, ArrowUp, Space, що забезпечує легкість у читанні та розумінні коду.

document.addEventListener('keydown', function(event) {
    console.log(event.code); // Виведе код натиснутої клавіші, наприклад, "KeyA"
});

Ця властивість не залежить від мови та розкладки клавіатури, тому event.code є однаковим для будь-якої клавіатури, що забезпечує зручність в інтернаціональних проектах. Це також означає, що якщо, наприклад, натиснути клавішу "Q" на клавіатурі QWERTY та AZERTY, code поверне значення KeyQ для обох.

Порада:	`code` особливо корисний для комбінацій клавіш, оскільки він завжди повертає те саме значення, незалежно від мови чи розкладки клавіатури. Якщо ви створюєте комбінацію клавіш, використовуйте `code` замість `key`, щоб уникнути помилок.
Порада:	Для кращої сумісності та обробки дій клавіатури перевіряйте `code` для спеціальних клавіш, таких як `Escape`, `Enter`, `ArrowUp`, і застосовуйте умови для швидкого реагування на такі дії, як вихід чи підтвердження.
Порада:	Пам'ятайте, що `code` буде незмінним незалежно від зміни мови вводу на комп’ютері користувача. Це дозволяє створити послідовний досвід використання клавіатури незалежно від місцевої розкладки, що є важливим для багатомовних додатків.

Синтаксис

event.code

Значення

Return

Переглядачі

Переглядач
	48	38	10.1	35	79

Переглядач
	48	48	38	10.3

Переглядач
	-	-

Приклади

У цьому прикладі користувач може обрати між зміною кольору фону та зміною тексту у блоці resultBox. При натисканні комбінацій Ctrl + A або Ctrl + B виконується відповідна дія, залежно від вибраної опції. Ctrl + A запускає зміну кольору або тексту, а Ctrl + B повертає все до початкового стану. Це дозволяє на практиці побачити, як KeyboardEvent -> code може використовуватися для створення інтуїтивно зрозумілих гарячих клавіш.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/QWeKwpz">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Цей приклад відслідковує натискання стрілок "вгору" та "вниз", що корисно для навігації в інтерфейсі користувача або ігрових контролерів. Завдяки code ми можемо гарантувати правильне оброблення незалежно від мови клавіатури.

document.addEventListener('keydown', function(event) {
    if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
        console.log(`Натиснуто клавішу ${event.code}`);
    }
});

Цей приклад визначає комбінацію клавіш "Ctrl + A", яка може бути використана для виконання кастомної дії, як-от вибір всіх елементів на сторінці. Завдяки code ця комбінація спрацьовує навіть при різних мовних розкладках клавіатури, забезпечуючи узгодженість у користувацькому досвіді.

document.addEventListener('keydown', function(event) {
    if (event.code === 'KeyA' && event.ctrlKey) {
        console.log('Виконується спеціальна дія для Ctrl + A');
    }
});

JS довідник

JavaScript

Наповнення JS розділу