К
Катерина | Про Frontend
@katerina_profrontend3.1K подп.
1.3Kпросмотров
42.6%от подписчиков
25 декабря 2025 г.
Score: 1.4K
Обработка комбинаций клавиш 🧑‍💻 Комбинация клавиш используют для обычных вещей: сохранить данные, перейти между экранами, ускорить работу. В 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, чтобы не зависеть от раскладки. И, конечно же, не злоупотребляйте глобальными хоткеями — они должны дополнять интерфейс, а не заменять его. 😁
1.3K
просмотров
1356
символов
Да
эмодзи
Нет
медиа

Другие посты @katerina_profrontend

Все посты канала →
Обработка комбинаций клавиш 🧑‍💻 Комбинация клавиш использу — @katerina_profrontend | PostSniper