Comment puis-je identifier l'élément DOM actuellement ciblé en JavaScript ?

Identifier l'élément DOM ciblé en JavaScript

Découvrir quel élément DOM a le focus est crucial pour améliorer l'expérience utilisateur et contrôler l'interaction des éléments. En JavaScript, cela peut être réalisé en utilisant la propriété document.activeElement.

Utilisation de document.activeElement

document.activeElement représente l'élément actuellement ciblé dans le document. Il renvoie l'élément qui a le focus actif, tel qu'un champ de saisie, une zone de texte ou un bouton. Cette propriété est prise en charge par tous les principaux navigateurs.

Exemple :

const focusedElement = document.activeElement;
console.log("Focused element:", focusedElement.tagName);

Approches alternatives pour les navigateurs plus anciens

Dans Dans les navigateurs plus anciens, il n'existait pas de moyen direct de déterminer l'élément ciblé. Pour émuler cette détection, des gestionnaires d'événements pour « focus » et « flou » peuvent être ajoutés à tous les champs du formulaire. Lorsqu'un champ obtient le focus, sa référence peut être stockée dans une variable. À l'inverse, lorsqu'un champ perd le focus, la variable peut être effacée.

Flou de l'ActiveElement

Si vous souhaitez supprimer l'activeElement, vous pouvez utiliser la méthode blur() . Cela remplace l'activeElement par l'élément body.

document.activeElement.blur();

Ressources supplémentaires

• [Compatibilité du navigateur activeElement](https://developer.mozilla.org /en-US/docs/Web/API/Document/activeElement)
• [alternative jQuery pour document.activeElement](https://api.jquery.com/jQuery.fn.prop/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!