Comment déterminer quel élément a le focus en JavaScript

L’intégration de l’accessibilité dans vos applications Web devrait désormais être une seconde nature, alors que nous naviguons dans la troisième décennie du 21e siècle. L’un des composants clés de l’accessibilité est la navigation au clavier, permettant aux utilisateurs qui ont des difficultés à utiliser une souris de naviguer dans votre application. Malheureusement, s’assurer que tous les éléments interactifs sont accessibles via le clavier est une tâche trop souvent négligée par les développeurs Web. Un excellent exemple de mauvaise gestion du focus est de ne pas réinitialiser le focus sur l’élément déclencheur lors de la fermeture d’une boîte de dialogue modale. Même une application construite à l’aide d’un framework comme Angular n’est pas à l’abri de tels oublis. J’ai récemment travaillé sur un bogue où le développeur a désactivé l’élément déclencheur après avoir cliqué dessus, brisant ainsi la gestion intégrée du focus du contrôle. Si vous avez besoin de prendre en charge le focus dans votre application, ce tutoriel de développement web vous montrera comment le faire en toute simplicité !

Vous cherchez à apprendre le développement Web dans un format de cours ou de classe? Consultez notre didacticiel répertoriant certains des meilleurs cours en ligne pour apprendre le HTML.

Propriété document.activeElement de JavaScript

Vous avez peut-être déjà entendu parler du document.activeElement propriété, puisqu’elle existe depuis un certain temps, mais au cas où vous ne seriez pas bien familiarisé, le document.activeElement La propriété renvoie l’élément HTML actuellement ciblé.

Pour vous donner une idée de son fonctionnement, voici du code (assisté par jQuery), qui suit le focus lorsque vous cliquez sur les différents éléments de la page :

$(document).ready(function(){
 $(this).click(function() {
    var activeElement = document.activeElement;
    console.log(activeElement.tagName, activeElement.type || 'N/A');
  });
});

Étant donné que les événements de clic remontent à partir de l’élément d’origine, nous pouvons les capturer au niveau du document. Dans la fonction liée, nous obtenons une référence à l’élément focalisé à partir de la document.activeElement propriété et imprimez son nom et son type de balise sur la console. Voici un exemple de sortie :

Ce qui est génial document.activeElement est que les programmeurs n’ont besoin d’aucun type d’écouteur d’événement ou de gestionnaire d’abonnement de style observable pour garder une trace de l’élément ciblé ; vous pouvez vérifier le élémentactif propriété chaque fois que vous avez besoin de savoir quel élément a actuellement le focus.

Lis: Outils de gestion de projet pour les développeurs Web

Focalisable vs. Éléments tabulables en JavaScript

Ce serait le moment opportun pour couvrir la différence entre focalisable et tablable éléments. Certains éléments sont nativement focalisables, tandis que d’autres nécessitent de définir explicitement un index de tabulation. Dans tous les cas, l’élément doit être visible pour être focalisable.

Contrôles de formulaire comme saisir, sélectionner, zone de texteet bouton sont tous focalisables s’ils ne sont pas désactivés, tout comme les objets. D’autres éléments, tels que ancressont focalisables s’ils ont une href ou tabindex attribut. Entre-temps, Région les éléments sont focalisables s’ils sont à l’intérieur d’un carte nomméeavoir un href attribut, et il y a une image visible à l’aide de la carte. D’autres éléments sont focalisables en fonction de leur tabindex attribut et visibilité. Éléments avec un négatif tabindex sont dites focalisables, mais non tabulables.

Et maintenant pour les bonnes nouvelles; la élémentactif La propriété identifiera non seulement les éléments traditionnellement focalisables, comme les champs de formulaire et les liens, mais tout élément avec un zéro ou un positif tabIndex valeur – en d’autres termes, tout élément pouvant être sélectionné, qu’il soit tablable ou non.

Vérifier qu’un élément a déjà le focus en JavaScript

Parfois, les développeurs Web doivent définir le focus par programme afin qu’il ne soit pas perdu. Rien de mal à cela, mais vous voudrez peut-être vérifier qu’aucun autre élément n’a déjà le focus avant de le définir. Sinon, vous courez le risque de déplacer le focus, ce qui agacera l’utilisateur sans fin.

Un indice important pour déterminer si un élément est actuellement focalisé ou non a été fourni dans le code ci-dessus. Si vous cliquez quelque part dans le document qui n’est pas occupé par un contrôle de formulaire, vous verrez la sortie »CORPS N/A. C’est parce que le document.body conserve le focus tant que vous êtes sur cette page. Dans cet esprit, refactorisons notre fonction de rappel pour imprimer un message différent lorsqu’aucun élément de formulaire n’a le focus :

$(document).ready(function(){
 $(this).click(function() {
    var activeElement = document.activeElement;
    var output = activeElement === document.body 
	             ? "No element has focus." 
				 : activeElement.tagName + ', ' + activeElement.type;
    console.log(output);
  });
});

Voici un exemple de sortie avec notre nouveau message :

Vérification d’un élément spécifique pour le focus en JavaScript

Parfois, vous ne voulez pas savoir quel élément a actuellement le focus, seulement si un élément particulier l’a ou non. Pour ces situations, vous pouvez simplement comparer les élémentactif contre celui en question, un peu comme nous l’avons fait ci-dessus avec le document.body:

// dummy element
var myElement = document.getElementById('myElement');

// check for focus
var isFocused = (document.activeElement === myElement);

D’autres fois, les programmeurs peuvent être intéressés à vérifier si un élément n’a pas actuellement le focus. Par exemple, un développeur aimerait peut-être savoir si un élément n’a pas le focus avant de le définir par programme. L’extrait de code suivant montre comment procéder :

var activeElement = document.activeElement;
var myElement = document.getElementById('my-element');
if (activeElement !== myElement) {
	myElement.focus();
});

Vérifier si le document a le focus en JavaScript

Bien qu’un élément avec le focus soit toujours l’élément actif dans le document, un élément actif n’a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n’est pas au premier plan n’a pas le focus. Dans de tels cas, vous voudrez également vérifier si le document entier a le focus. Pour ce faire, vous pouvez utiliser le aFocus() méthode de la Document interface. Il renvoie un booléen valeur indiquant si le document ou tout élément à l’intérieur du document a le focus.

Le code suivant invoque document.hasFocus() toutes les 300 millisecondes et présente un message affichant le résultat. En outre, il modifie également la couleur d’arrière-plan de la page de blanche à grise Chaque fois que la page perd le focus :

function checkPageFocus() {
  const log = document.getElementById('log');

  if (document.hasFocus()) {
    log.textContent="This document has the focus.";
    document.body.style.background = '#fff';
  }
  else {
    log.textContent="This document does not have the focus.";
    document.body.style.background = '#ccc';
  }
}

// Check page focus every 300 milliseconds
setInterval(checkPageFocus, 300);

Vous pouvez voir le code ci-dessus en action dans la démo codepen. Là, vous pouvez le voir en action en cliquant sur le “Ouvrir une nouvelle fenêtrebouton. Une fois que la nouvelle fenêtre reçoit le focus, la couleur de la page de déclenchement et le message changent. La fermeture de la nouvelle fenêtre les rétablit alors que le focus revient au document principal.

Réflexions finales sur le focus sur les éléments en JavaScript

Dans ce didacticiel JavaScript, nous avons appris à déterminer quel élément a le focus, ce qui est un facteur crucial dans la gestion du focus. Dans le processus, nous couvrons également la différence entre les éléments focalisables et tabulables, ainsi que la façon de vérifier si le document entier a le focus. Fort de ces connaissances, vous serez en mesure de rendre vos pages Web et vos applications plus accessibles à ceux qui ont des difficultés à utiliser une souris.

En savoir plus sur la programmation JavaScript et les didacticiels de développement Web.