JavaScript: код клавиши для комбинации Shift + Tab

Быстрый ответ

Для определения комбинации клавиш Shift+Tab в JavaScript необходимо использовать два свойства: event.key и event.shiftKey. Проверка событий клавиатуры включает в себя следующие шаги: убедиться, что нажатая клавиша — это Tab, и что модификатор shiftKey активен:

document.addEventListener('keydown', (event) => {
  if (event.key === 'Tab' && event.shiftKey) {
    // Операции при обратной навигации по элементам управления!
  }
});

При написании наглядного и современного кода рекомендуется использовать event.key вместо кодов клавиш.

Знакомьтесь с новыми методами: 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

• Динамические формы: Быстро и легко перемещайтесь назад по полям ввода без использования мыши.
• Навигация по таблицам: Свободно перемещайтесь по ячейкам для удобства ввода или просмотра данных.
• Управление в играх: Настраивайте клавиатурное управление для игроков или элементы интерфейса в веб-играх прямо в браузере.

Полезные материалы

1. KeyboardEvent: свойство keyCode – Веб API | MDN — подробная документация по свойству keyCode.
2. Значения клавиш для событий клавиатуры – Веб API | MDN — полный каталог значений клавиш, упрощающий разработку.
3. Коды символов JavaScript (коды клавиш) – Cambia Research — интерактивный инструмент для ознакомления с кодами символов в JavaScript.
4. Инструмент для обработки событий клавиш в JavaScript | Toptal® — с помощью этого сервиса можно узнать JS код для любого события клавиши.
5. WebAIM: Доступность клавиатуры — рекомендации и методики для обеспечения доступности клавиатурных команд в интернете.
6. tabindex – HTML: язык гипертекстовой разметки | MDN — глубокое изучение атрибута tabindex, который важен для навигации с помощью Shift + Tab.
7. Руководство по использованию ARIA | W3C — информация о применении ARIA для улучшения навигации с клавиатуры и доступности сайтов.