Wie erfasst man die Befehlstaste eines Mac über JavaScript?

Wie erfasst man den CmdSchlüssel eines Mac über JavaScript?

BEARBEITEN: Ab 2019 e.metaKeywird in allen gängigen Browsern gemäß MDN unterstützt .

Beachten Sie, dass unter Windows der ⊞ WindowsSchlüssel zwar als "Meta" -Schlüssel betrachtet wird, jedoch nicht von Browsern als solchen erfasst wird.

Dies gilt nur für die Befehlstaste unter MacOS / Tastaturen.

Im Gegensatz zu Shift/ Alt/ Ctrlwird die CmdTaste („Apple“) nicht als Modifizierertaste betrachtet. Stattdessen sollten Sie auf keydown/ hören keyupund aufzeichnen, wenn eine Taste gedrückt und dann basierend auf gedrückt wird event.keyCode.

Leider sind diese Schlüsselcodes browserabhängig:

• Feuerfuchs: 224
• Oper: 17
• WebKit-Browser (Safari / Chrome): 91(linker Befehl) oder 93(rechter Befehl)

Vielleicht möchten Sie den Artikel JavaScript Madness: Keyboard Events lesen , aus dem ich dieses Wissen gelernt habe.

Sie können sich auch das event.metaKeyAttribut des Ereignisses ansehen, wenn Sie mit Keydown-Ereignissen arbeiten. Arbeitete wunderbar für mich! Sie können es hier versuchen .

Ich habe festgestellt, dass Sie die Befehlstaste in der neuesten Version von Safari (7.0: 9537.71) erkennen können, wenn sie in Verbindung mit einer anderen Taste gedrückt wird. Wenn Sie beispielsweise ⌘ + x: erkennen möchten, können Sie die x-Taste erkennen UND prüfen, ob event.metaKey auf true gesetzt ist. Beispielsweise:

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

Wenn Sie x alleine drücken, wird dies ausgegeben 120, false. Wenn Sie ⌘ + x drücken, wird ausgegeben120, true

Dies scheint nur in Safari zu funktionieren - nicht in Chrome

Basierend auf Ilyas Daten habe ich eine Vanilla JS-Bibliothek zur Unterstützung von Modifikatortasten auf dem Mac geschrieben: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js

Verwenden Sie es einfach so, zB:

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

Getestet auf Chrome, Safari, Firefox, Opera auf Mac. Bitte überprüfen Sie, ob es für Sie funktioniert.

Für Benutzer von jQuery gibt es ein hervorragendes Plugin für die Behandlung von Schlüsselereignissen:

jQuery-Hotkeys auf GitHub

Zum Erfassen von ⌘+ Sund Ctrl+ verwende Sich Folgendes:

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

Hier ist, wie ich es in AngularJS gemacht habe

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()

Wenn Sie Vuejs verwenden, machen Sie es einfach mit dem Vue-Shortkey-Plugin, alles wird einfach

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

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