Как определить Tab
document.addEventListener('keydown', (event) => {
if (event.key === "Tab") {
// Tab was pressed
}
});Используйте event.key, чтобы реагировать на то, что означает клавиша (значение зависит от раскладки клавиатуры), и event.code для её физического положения, например WASD в играх. keyCode и which устарели: они по-прежнему работают, но их значения отличаются в разных браузерах и раскладках.
Как браузеры обрабатывают Tab
Tab переводит фокус на следующий фокусируемый элемент, а Shift+Tab — на предыдущий. Перехватывайте клавишу только в виджетах, которым она нужна, например в редакторах кода, и обязательно предоставьте пользователям клавиатуры способ выйти из такого виджета (например, Escape, затем Tab).
В React
<input onKeyDown={(e) => { if (e.key === "Tab") { /* … */ } }} />Поиск keycode для JavaScript
Нажмите любую клавишу и сразу увидите все свойства события клавиатуры, а также готовый к копированию фрагмент keydown для горячих клавиш.
Часто задаваемые вопросы
Какой keyCode у Tab?
9. Однако он устарел: в новом коде используйте event.key («Tab») или event.code (Tab).
В чём разница между event.key и event.code?
event.key — это символ или действие, которое клавиша выдаёт при текущей раскладке; event.code — физическое положение клавиши, одинаковое на любой раскладке.
Что использовать: keydown или keypress?
keydown. Событие keypress устарело и не срабатывает для клавиш, которые не вводят символы, например Escape или стрелки.