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