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

Question

Как получить ключ Cmd для Mac через JavaScript?

Answer 1

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

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

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

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

Answer 2

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

Answer 3

Я обнаружил, что вы можете обнаружить командную клавишу в последней версии 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

Answer 4

Основываясь на данных Ильи, я написал библиотеку 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. Пожалуйста, проверьте, работает ли он для вас.

Answer 5

keyCodeа также whichтеперь устарели , поэтому рекомендуется избегать ответов, которые используют их здесь.

Один из способов сделать это сейчас — использовать keyсвойство аргумента события, которое поставляется с DOM keyupа также keypressСобытия. Вот простой пример того, как это сделать:

      document.onkeypress = (event) => {
    if (event.key === 'Meta') {
        console.log("Mac or Windows key was pressed!");
    } else {
        console.log("Another key was pressed")
    }
}

Это сработает при нажатии cmdклавиши на Mac (см. Мета в документах MDN ). Единственное, что следует здесь отметить, это то, что он также будет срабатывать при нажатии клавиши Windows, а клавиатура/ОС пользователя поддерживает это.

Если вам нужно более детальное понимание того, какая клавиша Meta была нажата, вы можете использовать codeсвойство на событие, которое может быть либоMetaLeftили же MetaRightв зависимости от того, какая физическая метаклавиша ( cmd) была нажата.

Answer 6

Для этого есть javascript-библиотека: keymaster.js

(нет таких зависимостей, как jquery)

Answer 7

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

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

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

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

Answer 8

Вот как я это сделал в 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()

Answer 9

      var element = //the DOM element to listen for the key on.
element.onkeyup = function(e) {
   if(e.metaKey) {
      //command key was pressed
   }
}

Answer 10

СKeyboardEvent.metaKey: boolean

      fromEvent(window, 'keydown').pipe(takeUntil(this._ngUnsubscribe)).subscribe(
  (res: KeyboardEvent) => {
    console.log(res.metaKey && res.key === 'Enter');
  }
);

Этот пример предназначен для fromEvent RxJS, но применим к любому KeyboardEvent.

Answer 11

      document.addEventListener('keydown', (e) => {
    if((e.key == 'Meta' && /Mac OS/.test(navigator.userAgent)) || e.ctrlKey) {
      // CTRL or CMD pressed
    }
})

Answer 12

Это шоу захватывает команду Mac и Ctrl Windows.

#команда Mac

      $("#my_input").on('change keyup input', function() {
    var e = window.event || e; var key = e.keyCode; if(key == 93) {
        alert("Hello");
}
});

#Windows Ctrl

      $("#my_input").on('change keyup input', function() {
    var e = window.event || e; var key = e.keyCode; if(key == 17) {
        alert("Hello");
}
});

#Оба

      $("#my_input").on('change keyup input', function() {
    var e = window.event || e; var key = e.keyCode; if(key == 17 || key == 93) {
        alert("Hello");
}
});

Answer 13

Если вы используете Vuejs, просто сделайте это плагином vue-shortkey, все будет просто

https://www.npmjs.com/package/vue-shortkey

v-shortkey="['meta', 'enter']"·
@shortkey="metaEnterTrigged"