web-dev-qa-db-fra.com

Code de clé jQuery pour la touche de commande

J'ai lu jQuery Event Keypress: quelle touche a été pressée? et comment puis-je vérifier si la touche est pressée pendant l'événement de clic avec jquery?

Cependant, ma question est de savoir si vous pouvez obtenir le même événement clé pour tous les navigateurs? Actuellement, je sais que Firefox donne command bouton (Mac) le code 224 tandis que Chrome et Safari lui donnent la valeur 91. Est la meilleure approche pour vérifier simplement quel navigateur l'utilisateur utilise et baser la touche appuyée dessus ou y a-t-il un façon de pouvoir obtenir 1 code clé sur tous les navigateurs? Remarque: J'obtiens la valeur avec:

var code = (evt.keyCode ? evt.keyCode : evt.which);

J'adorerais ne pas utiliser de plugin si possible juste parce que j'ai seulement besoin de connaître command/ctrl (système Windows) enfoncée.

javascriptjquerycommandkeydownonkeyup
47
Craig

jQuery gère déjà cela. Pour vérifier si la commande a été enfoncée, vous devez utiliser:

$(window).keydown(function (e){
    if (e.ctrlKey) alert("control");
});

La liste des touches de modification:

e.ctrlKey
e.altKey
e.shiftKey

Et comme l'a suggéré fudgey:

e.metaKey

Pourrait fonctionner sur MAC. Quelques autres façons ici aussi .

81
BrunoLM

Si vous n'êtes pas intéressé par le moment exact où le Command est pressée, juste si elle est pressée quand une autre touche est pressée, alors vous pouvez utiliser la propriété metaKey de l'événement.

Sinon, pour les événements keydown et keyup, la propriété dont vous avez besoin est keyCode dans tous les navigateurs. Malheureusement, le Command la clé n'a pas le même code clé dans tous les navigateurs, et la gauche et la droite Commands ont des valeurs différentes dans WebKit (91 et 93 respectivement). Je ne vois pas un moyen facile de détecter ces clés sans une sorte de reniflement de navigateur, mais il peut y en avoir une. La propriété which ne vous aidera certainement pas.

Pour plus d'informations, http://unixpapa.com/js/key.html a une couverture complète de la gestion des événements clés dans tous les principaux navigateurs.

11
Tim Down

Voilà, essayez ceci en direct dans cet extrait de code exécutable:

$(window).on('keypress', function(event) {
  $("body").append($("<p>").text(
       "ctrlKey " + event.ctrlKey
    + "; altKey " + event.altKey
    + "; metaKey " + event.metaKey
    + "; shiftKey " + event.shiftKey
    + "; isCommandPressed " + isCommandPressed(event)
  ));
  
});

function isCommandPressed(event) {
  return event.metaKey && ! event.ctrlKey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Focus on this select control and try pressing keys:</p>

<p><select><option>Test</option></select></p>
2
Flimm