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