Come si acquisisce la Cmdchiave di un Mac tramite JavaScript?
Come si acquisisce la Cmdchiave di un Mac tramite JavaScript?
Risposte:
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
/ keyup
e registrare quando un tasto viene premuto e quindi premuto in base a event.keyCode
.
Sfortunatamente, questi codici chiave dipendono dal browser:
224
17
91
(comando sinistro) o 93
(comando destro)Potresti essere interessato a leggere l'articolo JavaScript Madness: Keyboard Events , da cui ho appreso quella conoscenza.
keydown
eventi, non keyup
.
Puoi anche guardare l' event.metaKey
attributo sull'evento se stai lavorando con eventi keydown. Ha funzionato meravigliosamente per me! Puoi provarlo qui .
.metaKey
funziona infatti negli ultimi Firefox, Safari e Opera. In Chrome, si .metaKey
attiva Control (non su Command).
keydown
ma NON per keyup
o keypress
.
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
Basandomi sui dati di Ilya, ho scritto una libreria Vanilla JS per supportare i tasti modificatori su Mac: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js
Usalo in questo modo, ad esempio:
document.onclick = function (event) {
if (event.shiftKey || macKeys.shiftKey) {
//do something interesting
}
}
Testato su Chrome, Safari, Firefox, Opera su Mac. Si prega di verificare se funziona per voi.
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
});
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()
se usi Vuejs, fallo semplicemente con il plugin vue-shortkey, tutto sarà semplice
https://www.npmjs.com/package/vue-shortkey
v-shortkey="['meta', 'enter']"·
@shortkey="metaEnterTrigged"