appuyer sur deux touches continues pour déclencher un événement en JavaScript

Question

En Vim vous pouvez appuyer sur gg pour revenir au début du document, ou appuyez sur dd supprimer la ligne en cours. Comment mettre en œuvre un comportement similaire dans une page web ? Je veux dire, dans un environnement de page web, comment puis-je capturer deux appuis continus sur une touche pour déclencher un événement ?

Gracias.

Answer 1

Vous devez surveiller tous les événements de pression de touche et, lorsque vous trouvez une touche qui est peut-être la première d'une combinaison à pressions multiples, démarrer un minuteur. Si la deuxième touche de la combinaison est pressée pendant que le minuteur est actif, il faut faire quelque chose.

par exemple (pseudocode)

//for gg
var inCombo = false;
function KeyPress(Key) {
   if(Key=='g') {
      if(!inCombo) {
          inCombo = true;
          setTimeout('inCombo=false;', 100);
      } else {
          //Do the action here
      }
   }
}

En //Do the action here ne se déclenchera que si g est appuyée deux fois dans un délai de 100 ms

Answer 2

Vous ne pouvez pas. Il suffit d'enregistrer l'événement normal de la touche et de pousser les touches dans un tableau.

Vous pouvez maintenant appeler une fonction qui vérifie la présence des commandes :

 // More or less pseudo code
 function deleteLine(){};
 function copyLine(){};      

 var commands = {'dd': deleteLine, 'yy': copyLine};    

 function onKeyPress(e) {
     keyList.push(e.key);

     // in this example keyList = ['d', 'y', 'i', 'd', 'd']
     var result = handleEvent();
 }

 function handleEvent(keyList) {
      // more pseudo code follows

      var cmds = commands.keyValue.sortByLengthDescending();
      for(var c in cmds) {

          // match the keys
          var ckey = c.split('');
          for(var i = keyList.length; i >= 0; i--) {
              if (keyList[i] !== ckey.shift()) {
                  break;
              }
              if (ckey.length === 0) {
                  return commands[c]();
              }
          }
      }
 }

C'est simple, propre (cela dépend de la façon dont vous l'écrivez exactement) et évolutif, il est assez facile d'ajouter des commandes, bien sûr en le modifiant pour pouvoir passer des paramètres à la fonction de commande, etc.