Come si acquisisce la chiave di comando di un Mac tramite JavaScript?


Risposte:


238

EDIT: a partire dal 2019, e.metaKeyè supportato su tutti i principali browser come da MDN .

Si noti che su Windows, sebbene la ⊞ Windowschiave sia considerata la chiave "meta", non verrà catturata dai browser in quanto tale.

Questo è solo per il tasto di comando su MacOS / tastiere.


A differenza di Shift/ Alt/ Ctrl, il Cmdtasto ("Apple") non è considerato un tasto modificatore; invece, è necessario ascoltare keydown/ keyupe registrare quando un tasto viene premuto e quindi premuto in base a event.keyCode.

Sfortunatamente, questi codici chiave dipendono dal browser:

  • Firefox: 224
  • Musica lirica: 17
  • Browser WebKit (Safari / Chrome): 91(comando sinistro) o 93(comando destro)

Potresti essere interessato a leggere l'articolo JavaScript Madness: Keyboard Events , da cui ho appreso quella conoscenza.


2
Sappi che Opera è ora anche nella categoria Webkit. Penso che solo ascoltare 91, 93 e 224 farà il lavoro. 17 è Ctrl, a proposito. La vecchia Opera non differenzia Cmd e Ctrl ??
Steven Lu,

56
Sembra che event.metaKey funzioni nelle attuali versioni di Safari, Firefox e Chrome come un fascino. IMO è una soluzione molto chiara.
Miroslav Nedyalkov,

5
In risposta al commento di Miroslav, basta notare che funziona solo sugli keydowneventi, non keyup.
nachocab,

209

Puoi anche guardare l' event.metaKeyattributo sull'evento se stai lavorando con eventi keydown. Ha funzionato meravigliosamente per me! Puoi provarlo qui .


Questo non sembra essere impostato per me con Firefox 4.0.1 su MacOS. Dato che la risposta accettata e il riferimento collegato non sono d'accordo con quello che hai detto, penso che questa risposta sia errata.
Josh Glover,

8
.metaKeyfunziona infatti negli ultimi Firefox, Safari e Opera. In Chrome, si .metaKeyattiva Control (non su Command).
Ilya Semenov,

1
FWIW, cmd + e non funziona per me nella tua sceneggiatura. Ctrl attiva l'icona CMD che hai
Oscar Godson

1
cmd + e non attiva neanche l'evento per me (chrome). ctrl + e lo fa.
Spencer Williams,

23
Penso che il trucco (anche in Chrome) sia che funziona per, keydownma NON per keyupo keypress.
philfreo,

15

Ho scoperto che è possibile rilevare il tasto comando nell'ultima versione di Safari (7.0: 9537.71) se viene premuto insieme a un altro tasto. Ad esempio, se si desidera rilevare ⌘ + x :, è possibile rilevare il tasto x E verificare se event.metaKey è impostato su true. Per esempio:

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

Quando si preme x da solo, verrà emesso 120, false. Quando si preme ⌘ + x, verrà emesso120, true

Questo sembra funzionare solo in Safari, non in Chrome


qual è lo stato nel 2017?
SuperUberDuper,


8

Per le persone che usano jQuery, esiste un eccellente plug-in per la gestione degli eventi chiave:

Tasti di scelta rapida jQuery su GitHub

Per catturare + Se Ctrl+ Ssto usando questo:

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

1
Funziona troppo bene. Anche tutte le altre pressioni dei tasti vengono catturate.
Felix Rabe,

È supportato da più browser?
Adil Malik,

1
Se avessi visitato il link nella mia risposta, avresti saputo: github.com/tzuryby/jquery.hotkeys#jquery-compatibility
Koen.

3

Ecco come l'ho fatto in 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()

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.