JavaScript: код клавиши для комбинации Shift + Tab
Быстрый ответ
Для определения комбинации клавиш Shift+Tab в JavaScript необходимо использовать два свойства: event.key
и event.shiftKey
. Проверка событий клавиатуры включает в себя следующие шаги: убедиться, что нажатая клавиша — это Tab
, и что модификатор shiftKey
активен:
document.addEventListener('keydown', (event) => {
if (event.key === 'Tab' && event.shiftKey) {
// Операции при обратной навигации по элементам управления!
}
});
При написании наглядного и современного кода рекомендуется использовать event.key
вместо кодов клавиш.
[AsideBanner]
Знакомьтесь с новыми методами: e.key
и e.code
Технологии веб-разработки не стоят на месте, и подходы к написанию кода меняются. По сравнению с устаревшим e.keyCode
, теперь рекомендуется использовать свойства e.key
и e.code
. Свойство e.key
возвращает значение, описывающее физическое расположение клавиши, а e.code
— его физическое расположение, независимо от языка ввода.
Совместимость со старыми браузерами
Хотя event.keyCode
всё реже встречается в современном коде, существуют устаревшие браузеры, которые пока что не поддерживают e.key
. В этом случае стоит использовать определение возможностей и, при необходимости, полагаться на e.keyCode
.
Помните о доступности
Разрабатывая обработчики событий клавиатуры, не забудьте учесть аспекты доступности. Правильное использование HTML и атрибутов ARIA обеспечит легкое использование вашего приложения с помощью ассистивных технологий.
Визуализация
Посмотрим, как происходит навигация по элементам управления с помощью клавиатуры на примере комбинации Shift + Tab
:
↖️🔑: Shift
⇥🔙: Tab
Что случается, когда они используются вместе:
| Элементы формы | Направление перехода |
| ------------------ | -------------------- |
| Элемент 1 ➡️ Элемент 2 ➡️ Элемент 3 | Вперёд при помощи Tab |
| Элемент 3 ⬅️ Элемент 2 ⬅️ Элемент 1 | В обратном порядке при помощи Shift+Tab |
Вместе эти клавиши Shift + Tab
позволяют нам, так сказать, сделать шаг в прошлое при навигации! 🕰️
Подробнее о code
и key
- Свойство
event.code
отвечает за физическое расположение клавиши, не учитывая изменения языка или раскладки. event.key
относится к значению или функции, которые исполняет клавиша, например,Tab
. Это свойство оказывается незаменимым, когда встаёт вопрос о навигации и выполнении действий.
Надёжность обработки событий
Вы настроили обработчики событий клавиатуры? Подойдите с особой тщательностью к обработке комбинаций, таких как Shift+Tab. Учтите состояния e.shiftKey
и e.code
, чтобы ваш код правильно отрабатывал действия пользователя.
Примеры использования Shift+Tab
- Динамические формы: Быстро и легко перемещайтесь назад по полям ввода без использования мыши.
- Навигация по таблицам: Свободно перемещайтесь по ячейкам для удобства ввода или просмотра данных.
- Управление в играх: Настраивайте клавиатурное управление для игроков или элементы интерфейса в веб-играх прямо в браузере.
Полезные материалы
- KeyboardEvent: свойство keyCode – Веб API | MDN — подробная документация по свойству keyCode.
- Значения клавиш для событий клавиатуры – Веб API | MDN — полный каталог значений клавиш, упрощающий разработку.
- Коды символов JavaScript (коды клавиш) – Cambia Research — интерактивный инструмент для ознакомления с кодами символов в JavaScript.
- Инструмент для обработки событий клавиш в JavaScript | Toptal® — с помощью этого сервиса можно узнать JS код для любого события клавиши.
- WebAIM: Доступность клавиатуры — рекомендации и методики для обеспечения доступности клавиатурных команд в интернете.
- tabindex – HTML: язык гипертекстовой разметки | MDN — глубокое изучение атрибута
tabindex
, который важен для навигации с помощью Shift + Tab. - Руководство по использованию ARIA | W3C — информация о применении ARIA для улучшения навигации с клавиатуры и доступности сайтов.