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.