Отлавливаем нажатие клавиши Command на Mac через JavaScript
Быстрый ответ
Для отслеживания активации командной клавиши Command в JavaScript нужно использовать свойство event.metaKey
в обработчиках событий keydown
или keyup
:
document.addEventListener('keydown', (e) => e.metaKey && console.log('Командная клавиша нажата'));
Этот пример служит отправной точкой для разработки более сложных механизмов контроля за комбинациями клавиш.
Расширенное обнаружение
Для более точного отслеживания нажатий клавиш целесообразно использовать свойства event.key
и event.code
. Они помогут определить, нажата ли клавиша MetaLeft
или MetaRight
, и при этом позволят избежать устаревших свойств, например, keyCode
.
document.addEventListener('keydown', (event) => {
if(event.metaKey){
console.log(event.code);
}
});
Этот подход позволяет с большей точностью идентифицировать как левую, так и правую командные клавиши.
Кросс-браузерная совместимость
Важно учитывать различное поведение командной клавиши Command в разных браузерах, в частности в Safari, и проводить тщательное тестирование для обеспечения стабильности работы.
Особенности разных платформ
При разработке кросс-платформенных приложений обратите внимание, что на Mac значение event.key
для командной клавиши — 'Meta'. Однако такая логика не является универсальной. Следует стремиться к безупречной работе сочетаний клавиш в любой программной среде.
Визуализация
Клавиатуру можно представить как оркестр, а командную клавишу Command (⌘) на Mac — как его дирижёр:
Клавиатурный оркестр: 🎹🎷🎺🎻🥁
Дирижёр (⌘): 🎼
Отслеживание нажатия командной клавиши на JavaScript можно сравнить с дирижированием:
document.addEventListener('keydown', (event) => {
const cmdKey = event.metaKey;
if (cmdKey) {
// А здесь возникает музыкальное волшебство 🎵
}
});
В результате нажатия командной клавиши происходит "создание музыки кода":
Клавиатура: 🎹🎶
Сигнал дирижёра (⌘): 🎼✨
Практическое применение
Теперь приложим полученные знания на практике: сочетание Command-N позволит запустить процесс создания нового документа.
document.addEventListener('keydown', (event) => {
if (event.metaKey && event.key === 'n') {
event.preventDefault();
createNewDocument();
console.log('Осуществлено создание нового документа с помощью клавиши "n"');
}
});
Для предотвращения срабатывания браузерных горячих клавиш применяется event.preventDefault()
.
Удобно для использования
Обработчики событий для редактируемых элементов типа <input>
или <textarea>
должны быть построены таким образом, чтобы не препятствовать вводу текста:
document.addEventListener('keydown', (event) => {
if (event.target.tagName !== 'INPUT' &&
event.target.tagName !== 'TEXTAREA' &&
!event.target.isContentEditable) {
// Ваш текст находится в безопасности, печатайте спокойно.
}
});
Полезные материалы
- KeyboardEvent: свойство key – Веб API | MDN — Подробный обзор свойства
KeyboardEvent.key
. - Значение KeyboardEvent (keyCodes, metaKey и др.) | CSS-Tricks — Детальная информация о горячих клавишах в JavaScript.
- JavaScript – обнаружение клавиш — Полезные советы по обработке клавиатурных событий в разных браузерах.
- KeyboardEvent: свойство metaKey – Веб API | MDN — Обзор применения функции
metaKey
. - Инструмент для определения кода клавиши JavaScript | Toptal® — Удобный инструмент для быстрого определения кодов клавиш в JavaScript.
- Коды символов Javascript (Key Codes) – Cambia Research — Обзор кодов символов JavaScript для использования в кейсах с клавиатурой.