Como capturar a Cmdchave de um Mac via JavaScript?
Como capturar a Cmdchave de um Mac via JavaScript?
Respostas:
EDIT: a partir de 2019, e.metaKey
é suportado em todos os principais navegadores conforme o MDN .
Observe que no Windows, embora a ⊞ Windowschave seja considerada a chave "meta", ela não será capturada pelos navegadores como tal.
Isso é apenas para a chave de comando no MacOS / teclados.
Diferentemente de Shift/ Alt/ Ctrl, a Cmdtecla (“Apple”) não é considerada uma tecla modificadora - em vez disso, você deve ouvir keydown
/ keyup
e gravar quando uma tecla é pressionada e depois pressionada com base em event.keyCode
.
Infelizmente, esses códigos-chave dependem do navegador:
224
17
91
(Comando à Esquerda) ou 93
(Comando à Direita)Você pode estar interessado em ler o artigo JavaScript Madness: Keyboard Events , a partir do qual aprendi esse conhecimento.
keydown
eventos, não keyup
.
Você também pode olhar para o event.metaKey
atributo no evento se estiver trabalhando com eventos de pressionamento de tecla. Trabalhou maravilhosamente para mim! Você pode tentar aqui .
.metaKey
de fato funciona nos mais recentes Firefox, Safari e Opera. No Chrome, .metaKey
dispara no controle (não no comando).
keydown
mas NÃO para keyup
ou keypress
.
Descobri que você pode detectar a chave de comando na versão mais recente do Safari (7.0: 9537.71) se for pressionada em conjunto com outra tecla. Por exemplo, se você quiser detectar ⌘ + x:, poderá detectar a tecla x AND verificar se event.metaKey está definido como true. Por exemplo:
var key = event.keyCode || event.charCode || 0;
console.log(key, event.metaKey);
Ao pressionar x por si só, isso será exibido 120, false
. Ao pressionar ⌘ + x, ele exibirá120, true
Isso parece funcionar apenas no Safari - não no Chrome
Baseando-me nos dados de Ilya, escrevi uma biblioteca Vanilla JS para suportar chaves modificadoras no Mac: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js
Apenas use-o assim, por exemplo:
document.onclick = function (event) {
if (event.shiftKey || macKeys.shiftKey) {
//do something interesting
}
}
Testado no Chrome, Safari, Firefox, Opera no Mac. Por favor, verifique se funciona para você.
Para pessoas que usam jQuery, existe um excelente plugin para lidar com eventos importantes:
Teclas de atalho jQuery no GitHub
Para capturar ⌘+ Se Ctrl+ Seu estou usando isso:
$(window).bind('keydown.ctrl_s keydown.meta_s', function(event) {
event.preventDefault();
// Do something here
});
Aqui está como eu fiz isso no 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 você usa o Vuejs, basta fazê-lo com o plugin vue-shortkey, tudo será simples
https://www.npmjs.com/package/vue-shortkey
v-shortkey="['meta', 'enter']"·
@shortkey="metaEnterTrigged"