Comment capturer la touche de commande d'un Mac via JavaScript?

Comment capturer la Cmdclé d' un Mac via JavaScript?

EDIT: À partir de 2019, e.metaKeyest pris en charge sur tous les principaux navigateurs selon le MDN .

Notez que sous Windows, bien que la ⊞ Windowsclé soit considérée comme la clé «méta», elle ne sera pas capturée par les navigateurs en tant que telle.

C'est uniquement pour la touche de commande sur MacOS / claviers.

Contrairement à Shift/ Alt/ Ctrl, la Cmdtouche («Apple») n'est pas considérée comme une touche de modification - à la place, vous devez écouter sur keydown/ keyupet enregistrer lorsqu'une touche est enfoncée puis enfoncée en fonction de event.keyCode.

Malheureusement, ces codes clés dépendent du navigateur:

• Firefox: 224
• Opéra: 17
• Navigateurs WebKit (Safari / Chrome): 91(Commande gauche) ou 93(Commande droite)

Vous voudrez peut-être lire l'article JavaScript Madness: Keyboard Events , dont j'ai appris cette connaissance.

Vous pouvez également consulter l' event.metaKeyattribut sur l'événement si vous travaillez avec des événements keydown. A travaillé à merveille pour moi! Vous pouvez l'essayer ici .

J'ai trouvé que vous pouvez détecter la touche de commande dans la dernière version de Safari (7.0: 9537.71) si elle est enfoncée en conjonction avec une autre touche. Par exemple, si vous souhaitez détecter ⌘ + x :, vous pouvez détecter la touche x ET vérifier si event.metaKey est défini sur true. Par exemple:

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

Lorsque vous appuyez sur x seul, cela produira 120, false. Lorsque vous appuyez sur ⌘ + x, il sortira120, true

Cela ne semble fonctionner que dans Safari - pas dans Chrome

Sur la base des données d'Ilya, j'ai écrit une bibliothèque Vanilla JS pour prendre en charge les touches de modification sur Mac: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js

Utilisez-le simplement comme ceci, par exemple:

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

Testé sur Chrome, Safari, Firefox, Opera sur Mac. Veuillez vérifier si cela fonctionne pour vous.

Pour les personnes utilisant jQuery, il existe un excellent plugin pour gérer les événements clés:

Raccourcis clavier jQuery sur GitHub

Pour capturer ⌘+ Set Ctrl+ Sj'utilise ceci:

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

Voici comment je l'ai fait dans 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()

si vous utilisez Vuejs, faites-le simplement avec le plugin vue-shortkey, tout sera simple

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

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