¿Cómo se captura la Cmdclave de una Mac a través de JavaScript?
¿Cómo se captura la Cmdclave de una Mac a través de JavaScript?
Respuestas:
EDITAR: a partir de 2019, e.metaKey
es compatible con todos los principales navegadores según el MDN .
Tenga en cuenta que en Windows, aunque la ⊞ Windowsclave se considera la clave "meta", los navegadores no la capturarán como tal.
Esto es solo para la tecla de comando en MacOS / teclados.
A diferencia de Shift/ Alt/ Ctrl, la Cmdtecla ("Apple") no se considera una tecla modificadora; en cambio, debe escuchar y keydown
/ keyup
o grabar cuando se presiona una tecla y luego se presiona según event.keyCode
.
Desafortunadamente, estos códigos clave dependen del navegador:
224
17
91
(Comando izquierdo) o 93
(Comando derecho)Puede que le interese leer el artículo JavaScript Madness: Keyboard Events , del que aprendí ese conocimiento.
keydown
eventos, no keyup
.
También puede ver el event.metaKey
atributo en el evento si está trabajando con eventos keydown. ¡Funcionó maravillosamente para mí! Puedes probarlo aquí .
.metaKey
de hecho funciona en los últimos Firefox, Safari y Opera. En Chrome, se .metaKey
dispara en Control (no en Command).
keydown
pero NO para keyup
o keypress
.
Descubrí que puede detectar la tecla de comando en la última versión de Safari (7.0: 9537.71) si se presiona junto con otra tecla. Por ejemplo, si desea detectar ⌘ + x :, puede detectar la tecla x Y verificar si event.metaKey está establecido en verdadero. Por ejemplo:
var key = event.keyCode || event.charCode || 0;
console.log(key, event.metaKey);
Al presionar x por sí mismo, esto generará 120, false
. Al presionar ⌘ + x, saldrá120, true
Esto solo parece funcionar en Safari, no en Chrome
Basándome en los datos de Ilya, escribí una biblioteca Vanilla JS para admitir teclas modificadoras en Mac: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js
Solo utilízalo así, por ejemplo:
document.onclick = function (event) {
if (event.shiftKey || macKeys.shiftKey) {
//do something interesting
}
}
Probado en Chrome, Safari, Firefox, Opera en Mac. Por favor, compruebe si funciona para usted.
Para las personas que usan jQuery, hay un complemento excelente para manejar eventos clave:
teclas de acceso rápido jQuery en GitHub
Para capturar ⌘+ Sy Ctrl+ Sestoy usando esto:
$(window).bind('keydown.ctrl_s keydown.meta_s', function(event) {
event.preventDefault();
// Do something here
});
Así es como lo hice en 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()
si usas Vuejs, solo hazlo con el complemento vue-shortkey, todo será simple
https://www.npmjs.com/package/vue-shortkey
v-shortkey="['meta', 'enter']"·
@shortkey="metaEnterTrigged"