Comment détecter CapsLock et d'autres touches de modification spéciales non alphanumériques en JavaScript?

Question

Sans utiliser le altKey, shiftKey, ctrlKey, est-il possible de les détecter, y compris CapsLock, Tab et Espace?

Answer 1

Voici une manière intéressante de savoir quelle touche a été pressée en JavaScript. Ceci est très utile

• Pour déclencher une action basée sur la touche enfoncée.
• Pour empêcher la lecture d'un onglet dans le spoiler en créant une indentation plutôt que sur la mise au point
• Pour savoir si le verrouillage des majuscules est activé. L'utilisateur peut être notifié en particulier lors du remplissage des champs de formulaire.
• Utilisez les touches fléchées pour la navigation, etc.

Voici le code JavaScript: -

window.addEventListener("keypress", function(e){ 
     console.log(e.keyCode); 
    }); 

    window.addEventListener("keydown", function(e){ 
     if(e.keyCode==9)  
     { 
       console.log("You Pressed Tab"); 
       e.preventDefault(); 
     } 
    }); 

    window.addEventListener("keyup", function(e){ 
     var keyPressed; 
     switch(e.keyCode) 
     { 
      case 9: return; // already handled above 
      case 18: keyPressed="Alt"; e.preventDefault(); break; 
      case 20: keyPressed="Caps Lock"; break; 
      case 17: keyPressed="Ctrl"; break; 
      case 16: keyPressed="Shift"; break; 
      case 37: keyPressed="Left A"; break; 
      case 38: keyPressed="Top A"; break; 
      case 39: keyPressed="Right A"; break; 
      case 40: keyPressed="Bottom A"; break; 
      default: keyPressed=e.keyCode; 
     } 
     console.log("You pressed "+keyPressed); 
    }); 

La raison pour laquelle la construction switch case n'est pas keydown gestionnaire est parce que personnellement, je n'aime pas multiples exécution du gestionnaire lorsque la touche est maintenue enfoncée enfoncée. Bien sûr, plus de clés peuvent être ajoutées dans le cas switch. Notez également que Tab est sous keydown. C'est parce que Tab est déclenchée lorsque la touche est enfoncée. S'il avait été placé sous keyup, le gestionnaire keypress n'aurait pas été déclenché, changeant le focus de la fenêtre et rendant le gestionnaire keyup inutile. preventDefault() empêche Tab et Alt de modifier le focus.
Le code est juste une illustration, changez-le si nécessaire.