Обработка комбинаций клавиш 🧑‍💻

Комбинация клавиш используют для обычных вещей: сохранить данные, перейти между экранами, ускорить работу. В JavaScript это реализуется довольно просто, если понимать, как работают события клавиатуры.

Немного теории

✔️ Комбинация клавиш — это одно событие keydown, внутри которого мы проверяем:
⏺️ какую клавишу нажали;
⏺️ зажаты ли модификаторы (Ctrl, Shift, Alt, Meta);
✔️ В браузере нет отдельного события “Ctrl+S” — всё делается через условия.

Ключевые свойства события

✔️ event.key — символ или имя клавиши ("a", "Enter");
✔️ event.code — физическая клавиша ("KeyA", "Enter");
✔️ event.ctrlKey, event.shiftKey, event.altKey, event.metaKey — модификаторы.

Простой пример: Ctrl + S

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.code === 'KeyS') {
    event.preventDefault(); // при необходимости отменяем дефолтное поведение
    // наша логика
  }
});

На что стоит обратить внимание?

✨ Не перехватывайте хоткеи при вводе текста в input и textarea;
✨ На macOS вместо Ctrl часто используют Meta (Cmd);
✨ Удержание клавиши вызывает повторные события keydown;
✨ Для хоткеев лучше использовать event.code, чтобы не зависеть от раскладки.

И, конечно же, не злоупотребляйте глобальными хоткеями — они должны дополнять интерфейс, а не заменять его. 😁