Как получить командный ключ Mac через JavaScript?


Ответы:


238

EDIT: По состоянию на 2019 год , e.metaKeyбудет поддерживаться на всех основных браузерах , как в соответствии с MDN .

Обратите внимание, что в Windows, хотя ⊞ Windowsключ считается мета-ключом, он не собирается перехватываться браузерами как таковой.

Это только для клавиш управления на MacOS / клавиатурах.


В отличие от Shift/ Alt/ Ctrl, Cmdклавиша («Apple») не считается клавишей-модификатором - вместо этого вы должны слушать keydown/ keyupи записывать, когда клавиша нажата, а затем нажата на основе event.keyCode.

К сожалению, эти коды клавиш зависят от браузера:

  • Fire Fox: 224
  • Opera: 17
  • Браузеры WebKit (Safari / Chrome): 91(левая команда) или 93(правая команда)

Возможно, вам будет интересно прочитать статью « Безумие JavaScript: события клавиатуры» , из которой я узнал об этом.


2
Знайте, что Opera теперь также находится в категории Webkit. Я думаю, что только прослушивание 91, 93 и 224 сделает работу. 17 это Ctrl, кстати. Разве старая опера не различала Cmd и Ctrl ??
Стивен Лу

56
Кажется, что event.metaKey работает в текущих версиях Safari, Firefox и Chrome как шарм. ИМО это очень понятное решение.
Мирослав Недялков

5
В ответ на комментарий Мирослава просто отметим, что он работает только на keydownсобытия, а не keyup.
Начокаб

209

Вы также можете посмотреть на event.metaKeyатрибут события, если вы работаете с событиями нажатия клавиш. Работал чудесно для меня! Вы можете попробовать это здесь .


Похоже, это не установлено для меня с Firefox 4.0.1 на MacOS. Учитывая, что принятый ответ и связанная ссылка не согласны с тем, что вы сказали, я думаю, что этот ответ неверен.
Джош Гловер

8
.metaKeyдействительно работает в последних Firefox, Safari и Opera. В Chrome .metaKeyсрабатывает при управлении (не по команде).
Илья Семенов

1
FWIW, cmd + e не работает для меня в вашем сценарии. Ctrl вызывает значок CMD, который у вас есть
Оскар Годсон

1
cmd + e также не запускает событие для меня (хром). Ctrl + E делает.
Спенсер Уильямс

23
Я думаю, что хитрость (даже в Chrome) заключается в том, что это работает для, keydownно НЕ для keyupили keypress.
Philfreo

15

Я обнаружил, что вы можете обнаружить командную клавишу в последней версии Safari (7.0: 9537.71), если она нажата в сочетании с другой клавишей. Например, если вы хотите обнаружить ⌘ + x:, вы можете обнаружить клавишу x И проверить, установлен ли для event.metaKey значение true. Например:

var key = event.keyCode || event.charCode || 0;
console.log(key, event.metaKey);

При самостоятельном нажатии x это будет выводить 120, false. При нажатии ⌘ + x, он выведет120, true

Кажется, это работает только в Safari, а не в Chrome


какой статус в 2017 году?
SuperUberDuper

13

Основываясь на данных Ильи, я написал библиотеку Vanilla JS для поддержки клавиш-модификаторов на Mac: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js

Просто используйте это так, например:

document.onclick = function (event) {
  if (event.shiftKey || macKeys.shiftKey) {
    //do something interesting
  }
}

Протестировано на Chrome, Safari, Firefox, Opera на Mac. Пожалуйста, проверьте, работает ли он для вас.


8

Для людей, использующих jQuery, есть отличный плагин для обработки ключевых событий:

Горячие клавиши jQuery на GitHub

Для захвата + Sи Ctrl+ Sя использую это:

$(window).bind('keydown.ctrl_s keydown.meta_s', function(event) {
    event.preventDefault();
    // Do something here
});

1
Работает слишком хорошо. Все другие нажатия клавиш тоже фиксируются.
Феликс Рабе

Это кросс-браузер поддерживается?
Адиль Малик

1
Если бы вы посетили ссылку в моем ответе, вы бы знали: github.com/tzuryby/jquery.hotkeys#jquery-compatibility
Koen.

3

Вот как я это сделал в AngularJS

app = angular.module('MM_Graph')

class Keyboard
  constructor: ($injector)->
    @.$injector  = $injector
    @.$window    = @.$injector.get('$window')                             # get reference to $window and $rootScope objects
    @.$rootScope = @.$injector.get('$rootScope')

  on_Key_Down:($event)=>
    @.$rootScope.$broadcast 'keydown', $event                             # broadcast a global keydown event

    if $event.code is 'KeyS' and ($event.ctrlKey or $event.metaKey)       # detect S key pressed and either OSX Command or Window's Control keys pressed
      @.$rootScope.$broadcast '', $event                                  # broadcast keyup_CtrS event
     #$event.preventDefault()                                             # this should be used by the event listeners to prevent default browser behaviour

  setup_Hooks: ()=>
    angular.element(@.$window).bind "keydown", @.on_Key_Down              # hook keydown event in window (only called once per app load)
    @

app.service 'keyboard', ($injector)=>
  return new Keyboard($injector).setup_Hooks()

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.