11540 sujets

JavaScript, DOM et API Web HTML5

[jQuery] capture combinaison touches sur IE ne fonctionne pas

Modérateur
Bonjour,

Je lance un bout de code jQuery en demandant à l'utilisateur de maintenir la touche "alt" tout en appuyant sur la touche "c". Ça fonctionne sur Firefox mais pas sur IE ni sur Chrome. J'ai vérifié, sur IE, il n'y a pas de conflit avec un raccourci clavier du navigateur déjà existant.
Le code qui se trouve en fin de page web dans jQuery(document).ready :
    $(document).keypress(function(e) {
        if (e.which == 99 && e.altKey) {
            sessionStorage.setItem("jjbbtcd", 1);
            // Displaying warning
            var displayIS = "Code display enabled !";
            alert(displayIS);
        }
        else {
            sessionStorage.setItem("jjbbtcd", 0);
        }
    });


Je suppose que ça vient de mon e.altKey, mais je n'arrive pas à trouver de solution alternative...
Merci d'avance pour votre aide. Smiley smile
Modifié par jojaba (12 Dec 2014 - 08:11)
Modérateur
Un alt se détecte sur un keydown (ou un keyup). Mais pas sur un keypress vu qu'il n'envoie rien lorsqu'on le relâche.

Attention, e.which sur un keypress renvoie le code du caractère envoyé, et non de la touche. Sur mac en tout cas alt-c n'envoie pas 99 mais 169 (©) est-ce le cas aussi sur win/linux, je ne crois pas?

Sur la doc jQuery (http://api.jquery.com/keypress/);
a écrit :

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.
[…]
Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.


En utilisant keydown et 67 (C) au lieu de 99(c) ça devrait mieux aller.
Modérateur
p.s. : en tout cas ça fonctionne sous mac avec Firefox/Chrome, il faudra peut-être enregistrer le alt au keydown de ce dernier et le désenregistrer au keyup, sans certitude.
Modifié par kustolovic (12 Dec 2014 - 09:58)
Modérateur
avec keydown ça ne fonctionne pas (c'est pour ça que j'utilisais keypress). Tu parles d'enregistrement, je suppose que cela se réfère à ce qu'on peut lire ici : http://stackoverflow.com/questions/10655202/detect-multiple-keys-on-single-keypress-event-on-jquery
J'ai finalement changé mon fusil d'épaule pour résoudre ce problème, je n'utilise plus de combinaison de touche mais simplement une seule touche pour lancer la fonctionnalité (en l'occurrence le #).
Modérateur
Oui quelque chose du genre:


(function(){
  var isAlt = false;
  $(document).keydown(function(e) {
    console.log('keydown', e.which);
    if (e.which == 18) {
      isAlt = true;
    }
    else if (e.which == 67 && isAlt) {
      alert('alt+c wins!');
    }
  }).keyup(function(e) {
    console.log('keyup', e.which);
    if (e.which == 18) {
      isAlt = false;
    }
  });
})();

voir http://jsfiddle.net/emrpmutq/1/ qui fonctionne chez moi sur firefox et chrome mac et IE windows.
Modérateur
Merci pour ton exemple qui a le mérite d'être simple et qui m'a permis de comprendre le mécanisme :
On vérifie d'abord si la touche alt est bien enfoncée, ensuite à l'appui de la deuxième touche (le "c" en l'occurrence), on vérifie que la touche "alt" est bien enfoncée pour afficher l'alerte.
Si une touche est "relâchée", on rebascule la valeur de isAlt à false pour réinitialiser.
Ce qui me perturbait un peu également, c'est le fait qu'à la suite de l'évènement keydown, on ajoute l'évènement keyup, mais après réflexion, c'est tout à fait logique.

J'ai testé sur Chrome et Firefox sur Windows, ça fonctionne également.
Sujet clos
Aller à