web-dev-qa-db-fra.com

Comment capturer une clé de commande d'un Mac via JavaScript?

Comment capturer un Mac Cmd clé via JavaScript?

javascriptdom-events
157
DataGreed

Contrairement à Shift/Alt/Ctrl, le Cmd ("Apple") n'est pas considérée comme une touche de modification. Vous devez plutôt écouter sur keydown/keyup et enregistrer quand une touche est enfoncée puis enfoncée sur la base de event.keyCode.

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

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

Vous pourriez être intéressé par la lecture de l'article JavaScript Madness: Keyboard Events , à partir duquel j'ai appris cette connaissance.

214
Ilya Semenov

Vous pouvez aussi regarder le event.metaKey attribut sur l'événement si vous travaillez avec des événements keydown. A fonctionné à merveille pour moi! Vous pouvez l'essayer ici .

197
Sunny

J'ai constaté que vous pouvez détecter la clé de commande dans la dernière version de Safari (7.0: 9537.71) si elle est enfoncée conjointement avec une autre clé. Par exemple, si vous souhaitez détecter ⌘ + x :, vous pouvez détecter la clé 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 affichera 120, false. En appuyant sur ⌘ + x, le résultat sera 120, true

Cela semble seulement fonctionner dans Safari - pas Chrome

13
cryptopay

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

Il suffit de l'utiliser 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.

10
Michael Zelensky

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

touches de raccourci jQuery sur GitHub

Pour capturer ⌘+S et Ctrl+S J'utilise ceci:

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

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()
3
Dinis Cruz

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"
0
cuimingda