Détecter et gérer les pressions sur les touches de tabulation en JavaScript

JavaScript propose une méthode intégrée pour détecter les pressions sur les touches du clavier et plusieurs façons de gérer ces événements. Vous pouvez configurer des écouteurs d’événements dans votre code, ce qui est un excellent moyen de garantir que les événements souhaités ne se produisent que lorsque les éléments appropriés sont sélectionnés.

Cela dit, des touches de clavier spécifiques ont des fonctions prédéterminées dans la plupart des navigateurs - et en fait sur la plupart des systèmes d’exploitation. Par exemple, l’utilisation de F1 dans la plupart des navigateurs ouvrira une page d’aide, et la touche F5 actualisera la page actuelle.

Il en va de même pour la touche Tab, qui est utilisée pour parcourir les hyperliens et les zones de texte dans la plupart des navigateurs. Cependant, vous pouvez toujours détecter cet événement à l’aide de JavaScript et effectuer des actions spécifiques chaque fois que la touche Tab est enfoncée. Par exemple, vous voudrez peut-être faire quelque chose avec le lien hypertexte sélectionné ou même modifier les propriétés de la saisie de texte chaque fois qu’un utilisateur y bascule en utilisant Tab.

Voici un exemple de la façon dont vous pouvez ajouter un écouteur d’événement pour la touche Tab :

Créer un écouteur d’événement pour détecter quand la touche Tab est enfoncée en JavaScript

<a href="https://www.delftstack.com/">Test Link 1</a>
<a href="https://www.delftstack.com/contact/">Test Link 2</a>
<a href="https://www.delftstack.com/about-us/">Test Link 3</a>

document.addEventListener('keyup', detectTabKey);

function detectTabKey(e) {
  if (e.keyCode == 9) {
    activeElem = document.activeElement;
    console.log(activeElem.href);
  }
}

Production :

"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"

Le code JavaScript ci-dessus comporte deux parties fonctionnelles :

1. La méthode document.addEventListener() prend deux arguments : le type d’événement que vous souhaitez écouter (dans ce cas, il s’agit de l’événement keyup), et la fonction que vous utilisez pour exécuter lorsque l’événement est déclenché.
2. Notre fonction personnalisée detectTabKey() vérifie si le code de la touche pour l’événement est le même que celui de la touche Tab. S’il y a correspondance, imprimez le lien hypertexte vers la console.

Ajouter plus de logique pour s’assurer que seuls les éléments <a> déclenchent l’écouteur d’événements

Certains d’entre vous ont peut-être déjà repéré un problème avec la méthode précédente : que se passe-t-il si notre page Web contient des zones de saisie de texte ? Si tel est le cas, appuyer sur la touche Tab les fera également défiler, et comme ils n’ont pas d’attribut href, notre fonction ne fonctionnera pas comme prévu.

Heureusement, JavaScript ne générera pas d’erreur si c’est le cas, mais il affichera undefined chaque fois qu’une entrée de texte est sélectionnée. Pour nous assurer que cela ne se produise pas, nous devons ajouter une étape dans notre fonction detectTabKey().

Ajoutons un nouvel élément dans notre code HTML :

<a href="https://www.delftstack.com/">Test Link 1</a>
<a href="https://www.delftstack.com/contact/">Test Link 2</a>
<a href="https://www.delftstack.com/about-us/">Test Link 3</a>

<input type="text" placeholder="Text Box">

Si nous gardons le même code JavaScript qu’avant, la sortie ressemblera à ceci :

Production :

"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"
undefined

Afin de résoudre ce problème, nous devons ajouter une autre instruction if dans notre fonction detectTabKey(). Voici le code final :

document.addEventListener('keyup', detectTabKey);

function detectTabKey(e) {
  if (e.keyCode == 9) {
    activeElem = document.activeElement;
    if (activeElem.tagName.toLowerCase() == 'a') {
      console.log(activeElem.href);
    }
  }
}

Production :

"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"

La zone de texte ne déclenche pas notre fonction même lorsqu’elle est sélectionnée comme élément actif car elle ne remplit pas la nouvelle condition. Ainsi, le code n’imprimera l’attribut href que si l’élément actuellement actif est associé à la balise a. Nous avons également ajouté la méthode .toLowerCase() pour nous assurer de ne manquer aucun élément.