JS властивість Event.which (Key)
Загальний опис
which — це властивість об'єкта KeyEvent, яка повертає числовий код клавіші, натиснутої користувачем під час події клавіатури, такої як keydown, keypress або keyup. Вона використовувалася раніше для визначення коду клавіші, яка була натиснута. Кожна клавіша на клавіатурі має свій код, який представляє цю клавішу, наприклад: 13 для клавіші Enter, 27 для Escape, 32 для пробілу і т. д.
Зараз властивість which вважається застарілою, і рекомендується використовувати більш сучасні властивості, такі як event.key або event.code, які надають більш детальну інформацію. Однак which все ще використовується для забезпечення сумісності з деякими старими браузерами. Для більш сучасного підходу event.key повертає символ натиснутої клавіші (наприклад, "Enter" або "a"), тоді як event.code повертає фізичний код клавіші незалежно від мови розкладки.
При використанні властивості which, варто пам'ятати, що її поведінка може відрізнятися для подій keypress, де вона повертає значення символу (ASCII-код), і для keydown та keyup, де вона повертає код фізичної клавіші. Наприклад:
document.addEventListener('keydown', function(event) {
if (event.which === 13) {
console.log('Натиснута клавіша Enter.');
}
});
У цьому прикладі, коли користувач натискає клавішу Enter, значення which дорівнюватиме 13. Це дозволяє розробникам створювати функціонал, який реагує на певні клавіші або комбінації клавіш. Для сучасної кросбраузерної підтримки рекомендується використовувати key або code, а which застосовувати тільки в тих випадках, коли важлива підтримка старих браузерів.
Таким чином, властивість which є корисною для базових задач обробки подій клавіатури, однак для складніших завдань краще використовувати більш сучасні інструменти.
| Порада: | При роботі з властивістю |
| Порада: | Якщо вам потрібно обробляти клавіші з особливим значенням, такі як стрілки або функціональні клавіші (F1-F12), властивість |
| Порада: | Завжди перевіряйте сумісність властивості |
Синтаксис
event.whichЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
15 |
79 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач вводить текст у текстове поле, а за допомогою події keydown відслідковується, яка клавіша була натиснута. При кожному натисканні клавіші на екрані відображається як символ клавіші, так і її код. Це корисно для тестування обробки введення з клавіатури та перевірки функціональності клавіш.
Цей приклад демонструє, як можна обробляти комбінацію клавіш Ctrl + F, яка зазвичай використовується для пошуку. Використовуючи which разом з модифікатором ctrlKey, можна створити власну логіку для обробки цієї комбінації.
document.addEventListener('keydown', function(event) {
if (event.which === 70 && event.ctrlKey) {
event.preventDefault();
console.log('Натиснуто Ctrl + F для пошуку.');
// Логіка для відкриття форми пошуку
}
});У цьому прикладі ми обробляємо клавіші стрілок (вліво та вправо) для навігації сторінкою або додатком. Це корисно в ситуаціях, коли потрібно забезпечити управління клавіатурою для покращення зручності користувача, наприклад, у слайдерах або галереях.
document.addEventListener('keydown', function(event) {
switch (event.which) {
case 37:
console.log('Перехід на попередню сторінку.');
// Логіка для переміщення назад
break;
case 39:
console.log('Перехід на наступну сторінку.');
// Логіка для переміщення вперед
break;
}
});