Utilisez JS pour acquérir les compétences code_javascript de l'élément focus

Pour une bonne expérience utilisateur, l’accessibilité, la convivialité et la fonctionnalité du site Web/de l’application Web sont cruciales.
Les utilisateurs ne réalisent pas quand notre site Web fonctionne bien/l'expérience est excellente, mais ils le ressentiront certainement lorsque nous ne faisons pas du bon travail. Un élément important de la convivialité et de l'accessibilité d'une application est la gestion du focus de saisie, mais c'est un élément que les développeurs négligent souvent.

Un exemple de mauvaise gestion du focus de saisie : ouvrir une fenêtre après avoir cliqué sur un lien, mais ne focaliser le curseur sur aucun élément de la fenêtre. Ou pire encore : se concentrer sur un élément dans la fenêtre modale, mais le focus ne revient pas après la fermeture. Idéalement, vous enregistreriez une référence lorsque le lien est déclenché, puis concentreriez le curseur sur la nouvelle fenêtre et reculeriez le curseur lorsque la fenêtre est fermée.

Mais que se passe-t-il si vous ne savez pas sur quel élément se trouve actuellement le curseur de saisie ? Grâce à la propriété document.activeElement, nous pouvons obtenir l'élément ciblé dans le document actuel

Le JavaScript
Il est facile de retrouver l'élément actuellement sélectionné en utilisant document.activeElement :

Copiez le code Le code est le suivant :

var focusElement = document.activeElement;

/* Par exemple :
var triggerElement = document.activeElement; : function () {
this.container.focus();
},
onClose : function() {
triggerElement.focus();
}
} ; 🎜> */


Cet attribut n'est pas seulement disponible sur les éléments d'entrée normaux, y compris les champs de formulaire ou les liens de balise , mais également sur tout élément dont l'attribut tabIndex est défini.

Ce que j'aime dans document.activeElement, c'est que vous n'avez pas besoin d'utiliser des écouteurs d'événements ou des écouteurs délégués pour savoir quel élément a le focus - vous pouvez obtenir cette propriété à tout moment. Bien sûr, vous devez effectuer des tests approfondis avant d'utiliser une telle fonctionnalité - qu'il y ait des bugs dans plusieurs navigateurs ou dans des conditions de concurrence. Dans l’ensemble, j’en suis très content et je le trouve très fiable !