Comment utiliser les événements de clavier javascript pour l'interface utilisateur Web

Question

Je suis intéressé par les événements JS tels que la flèche droite \ gauche, la barre d'espace, etc. Vous vous demandez quelle est la bonne façon de procéder. Je voudrais faire glisser des photos, faire apparaître des DIVs etc. sur de telles interactions utilisateur.

J'ai pensé à des implémentations possibles avec jQuery telles que http://api.jquery.com/event.which/ Bien que je ne sois pas sûr que ce soit la meilleure solution.

Voici deux bons exemples pour de telles implémentations d'interface utilisateur (Comment font-ils?) http://www.thesixtyone.com; Je suis plus un C# kinda guy, à la recherche de la bonne direction pour creuser po Merci.

Answer 1

Si vous utilisez déjà jQuery ou prévoyez le faire, en profitant de which n'est pas une mauvaise idée. Si vous regardez l'exemple, il vous montre exactement comment le faire. Placez votre curseur dans le champ de texte et appuyez sur la touche qui vous intéresse, c'est-à-dire sur la flèche gauche. Le numéro qui s'affiche dans keydown: est le code que vous recherchez. Maintenant, lorsque vous écrivez votre propre fonction, vous pouvez lier keydown au document et écouter les clés correctes. À partir de là, vous pouvez répartir certains comportements en fonction de la touche enfoncée.

$(document).bind('keydown', function (e) { 
    var code = e.which; 
    switch (code) { 
     case 39: 
      // code to execute when right arrow is pressed 
      some_right_arrow_action(); 
      break; 
     case 37: 
      // code to execute when left arrow is pressed 
      some_left_arrow_action(); 
      break; 
    } 
    return; 
}); 

Vous avez demandé comment des sites comme Pictorymag.com traitent cette fonctionnalité. Voici ce que Pictorymag.com fait (je l'ai décompressé leur code pour le rendre plus facile à lire):

$(document).keydown(function (e) { 
    switch(e.keyCode) { 
     case 39: 
     case 74: 
      node = s[++curr]; 
      if(node) { 
       $.scrollTo(node,800); 
      } else { 
       curr = s.length-1; 
      } 
      break; 
     case 37: 
     case 75: 
      node = s[--curr]; 
      if (node) { 
       $.scrollTo(node, 800); 
      } else { 
       curr=0; 
      } 
      break; 
    } 
});