Jak przechwycić klawisz polecenia Maca za pomocą JavaScript?

Jak przechwycić Cmdklucz Maca za pomocą JavaScript?

EDYCJA: od 2019 e.metaKeyjest obsługiwana we wszystkich głównych przeglądarkach zgodnie z MDN .

Zauważ, że w systemie Windows, chociaż ⊞ Windowsklucz jest uważany za klucz „meta”, nie zostanie przechwycony przez przeglądarki jako taki.

Dotyczy to tylko klawisza Command na MacOS / klawiaturach.

W przeciwieństwie do Shift/ Alt/ Ctrl, Cmdklawisz („Apple”) nie jest uważany za klawisz modyfikujący - zamiast tego należy nasłuchiwać keydown/ keyupi nagrywać, gdy klawisz jest naciskany, a następnie wciskany event.keyCode.

Niestety te kluczowe kody zależą od przeglądarki:

• Firefox: 224
• Opera: 17
• Przeglądarki WebKit (Safari / Chrome): 91(Lewe polecenie) lub 93(Prawe polecenie)

Możesz być zainteresowany przeczytaniem artykułu JavaScript Madness: Keyboard Events , z którego dowiedziałem się tej wiedzy.

Możesz również spojrzeć na event.metaKeyatrybut w zdarzeniu, jeśli pracujesz ze zdarzeniami keydown. U mnie zadziałało cudownie! Możesz spróbować tutaj .

Odkryłem, że możesz wykryć klawisz polecenia w najnowszej wersji Safari (7.0: 9537.71), jeśli zostanie naciśnięty w połączeniu z innym klawiszem. Na przykład, jeśli chcesz wykryć ⌘ + x :, możesz wykryć klawisz x ORAZ sprawdzić, czy event.metaKey ma wartość true. Na przykład:

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

Po samodzielnym naciśnięciu x spowoduje to wyświetlenie 120, false. Po naciśnięciu ⌘ + x zostanie wyświetlone120, true

Wydaje się, że działa to tylko w Safari - nie w Chrome

Bazując na danych Ilya, napisałem bibliotekę Vanilla JS do obsługi klawiszy modyfikujących na Macu: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js

Po prostu użyj tego w ten sposób, np:

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

Przetestowano w Chrome, Safari, Firefox, Opera na Macu. Sprawdź, czy to działa dla Ciebie.

Dla osób używających jQuery jest doskonała wtyczka do obsługi kluczowych zdarzeń:

Skróty klawiszowe jQuery w serwisie GitHub

Do przechwytywania ⌘+ Si Ctrl+ Sużywam tego:

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

Oto jak to zrobiłem w 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()

jeśli używasz Vuejs, po prostu zrób to za pomocą wtyczki vue-shortkey, wszystko będzie proste

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

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