Détection de la touche Alt dans Chrome

Question

Dans mon application, je dois gérer la pression/le relâchement de la touche Alt pour faire apparaître des informations supplémentaires dans les infobulles. Cependant, la première fois que la touche Alt est enfoncée, le document perd le focus clavier, car il passe au menu de Chrome. Si je clique sur n'importe quelle partie du document, cela fonctionne à nouveau (une fois).

Je peux éviter cela en appelant preventDefault mais cela désactive également les raccourcis clavier tels que Alt+Gauche/Droite, ce qui n'est pas souhaitable.

Je peux également m'occuper mousemove et vérifier altKey mais cela semble très gênant lorsque les éléments ne sont mis à jour que lorsque la souris est déplacée.

Existe-t-il un moyen de détecter de manière fiable l'état actuel de la touche Alt dans ma situation ? Je préférerais vraiment ne pas passer à une autre touche.

Mise à jour : Je suppose que la meilleure solution serait d'appeler preventDefault uniquement lorsqu'une infobulle est active.

  document.addEventListener("keydown", (e) => {
    if (this.curComponent) e.preventDefault();
    if (e.which === 18) {
      this.outer.classList.add("AltKey");
    }
  });
  document.addEventListener("keyup", (e) => {
    if (this.curComponent) e.preventDefault();
    if (e.which === 18) {
      this.outer.classList.remove("AltKey");
    }
  });

Answer 1

J'avais le même problème et je l'ai résolu grâce à ceci respuesta :

document.addEventListener("keyup", (e) => {
    if (e.key === "Alt") {
        return true; // Instead of e.preventDefault();
    });

return true rétablit le comportement normal de Alt + Left / Right les raccourcis clavier du chrome.

Answer 2

jQuery :

$(document).keyup(function(e){
    if(e.which == 17){
      alert("Alt key press");
    }
});

JavaScript

document.keyup = function(e){
  if(e.which == 17){
    alert("Alt key press");
  }
}