Отлавливаем нажатие клавиши 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) {
    // Ваш текст находится в безопасности, печатайте спокойно.
  }
});

Полезные материалы

1. KeyboardEvent: свойство key – Веб API | MDN — Подробный обзор свойства KeyboardEvent.key.
2. Значение KeyboardEvent (keyCodes, metaKey и др.) | CSS-Tricks — Детальная информация о горячих клавишах в JavaScript.
3. JavaScript – обнаружение клавиш — Полезные советы по обработке клавиатурных событий в разных браузерах.
4. KeyboardEvent: свойство metaKey – Веб API | MDN — Обзор применения функции metaKey.
5. Инструмент для определения кода клавиши JavaScript | Toptal® — Удобный инструмент для быстрого определения кодов клавиш в JavaScript.
6. Коды символов Javascript (Key Codes) – Cambia Research — Обзор кодов символов JavaScript для использования в кейсах с клавиатурой.