Détecter une suite de touches.

Par Nicwalle, il y a 11 ans

Javascript

Bonjour tout le monde,

J'aimerais créer un sytème qui détecterait l'appui d'une suite de touches sur une page web.

Mon but serait de faire en sorte qu'un utilisateur soit redirigé vers une page lorsqu'il appuie sur les touches e-x-e-m-p-l-e dans cette ordre là et sans intercaler d'autre lettre entre. (C'est en gros comme pour le badge konami code sur ce site).

J'avais pensé faire comme ceci:

$(window).keyup(function(e){ if(e.keyCode == "65"){ $(window).keyup(function(e){ if(e.keyCode == "78"){ ... } }); } });

mais le problème est que l'utilisateur peut intercaler n'importe quelle lettre entre les "bonnes" lettres: e-x-o-e-j-m-p-l-e et quand-même être redirigé.

Quelqu'un saurait-il comment faire?

Merci pour votre aide,

Nicwalle

4 réponses

maxslayer44, il y a 11 ans

Bonjour,

Une solution que tu peux mettre en place serait d'utiliser un compteur :

var i = 0; $(window).keyup(function(e){ if (e.keyCode == "65" && (i == 0 || i == 2)) { // Pour le premier et le second e i++; } elseif (e.keyCode == "78" && i == 0) { i++; } // Tes autres lettres elseif (e.keyCode == "65" && i == 6) { // Ta redirection } else { // Pas une lettre attendue i = 0; } }

Niveau performance je ne sais pas ce que ça vaut, sur de grands mots ça doit pas être terrible (même si très minime avec les architectures actuelles), mais c'est une solution relativement simple à mettre en place je pense.

Bonne soirée !

Nicwalle, il y a 11 ans

L'idée du compteur est excellente! Merci ;)

Par contre, je ne vois pas pourquoi dans la première condition, tu mets i=0 || i=2...

Nicwalle, il y a 11 ans

Excuse-moi, après relecture, j'ai compris pourquoi... C'est juste que je n'avais pas la combinaison e-x-e-m-p-l-e en tête...

maxslayer44, il y a 11 ans

De rien ;)
pour e.keyCode == "65" && (i == 0 || i == 2), c'est parce qu'on a la séquence suivante pour le mot exemple :

  • i vaut 0,
  • e est préssée, i vaut 1
  • x est pressée, i vaut 2
  • e est pressée, i vaut 3

Pour incrémenter le compteur en pressant e, il faut que le compteur ait pour valeur 0 ou 2 (sa valeur initiale ou sa valeur après avoir appuyée sur x), l'écriture que j'en est faite respecte l'algèbre de boole :

  • vrai et vrai font vrai
  • vrai et faux font faux
  • faux et faux font faux
  • vrai ou vrai font vrai
  • vrai ou faux font vrai
  • faux ou faux font faux

Ainsi, si i vaut 0 ou 2, la parenthèse (i == 0 || i == 2) vaut 1, l'interpréteur JavaScript réduit l'expression à e.keyCode == "65" && true.
J'espère avoir répondu à te question :)

Edit : pas de problème, je laisse cette réponse au cas ou d'autres personnes en aient besoin ^^