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 для спеціальних клавіш, таких як Escape, Enter, ArrowUp, і застосовуйте умови для швидкого реагування на такі дії, як вихід чи підтвердження.

автор: Bond правити

Порада

code особливо корисний для комбінацій клавіш, оскільки він завжди повертає те саме значення, незалежно від мови чи розкладки клавіатури. Якщо ви створюєте комбінацію клавіш, використовуйте code замість key, щоб уникнути помилок.

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.code

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

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

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