Document : propriété activeElement
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété en lecture seule activeElement de l'interface Document retourne un Element dans le DOM qui reçoit les évènements clavier tels que keydown et keyup. Cela correspond généralement à l'élément sélectionné.
Les éléments pouvant recevoir la sélection varient selon la plateforme et la configuration actuelle du navigateur. Par exemple, sur Safari, suivant le comportement de macOS, les éléments qui ne sont pas des champs de saisie texte ne peuvent pas recevoir la sélection par défaut, sauf si le paramètre « Accès complet au clavier » est activé dans les réglages du système.
En général, une personne peut appuyer sur la touche Tab pour déplacer la sélection sur la page entre les éléments pouvant la recevoir, et utiliser des gestes clavier tels que Espace ou Entrée pour simuler un clic sur l'élément sélectionné.
Note :
La sélection (qui détermine l'élément qui reçoit les évènements de saisie utilisateur·ice) n'est pas la même chose que la sélection (la partie actuellement surlignée dans le document). Vous pouvez obtenir la sélection courante à l'aide de window.getSelection().
Valeur
Un Element profond qui a actuellement la sélection.
- Si l'élément sélectionné est dans l'arbre d'ombre (shadow tree en anglais) dans le document actuel (par exemple, l'élément sélectioné est à l'intérieur d'un élément
iframeet ledocumentappelant contient cet iframe), alors ce sera l'élément racine de cet arbre (dans cet exemple, cetiframe). - Si l'élément sélectionné se trouve dans un arbre de document qui n'est pas issu du document actuel (par exemple, l'élément sélectionné se trouve dans le document principal, et le
documentappelant est un iframe intégré), alors ce seranull. - S'il n'y a pas d'élément sélectionné, ce sera le
Document.bodyou leDocument.documentElement.
Exemples
HTML
<p>Sélectionnez le texte d'une des zones de texte ci-après :</p>
<form>
<textarea name="ta-exemple-un" id="ta-exemple-un" rows="7" cols="40">
Voici la zone de texte n°1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
</textarea>
<textarea name="ta-exemple-deux" id="ta-exemple-deux" rows="7" cols="40">
Voici la zone de texte n°2. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
</textarea>
</form>
<p>Identifiant de l'élément actif : <b id="element-sortie"></b></p>
<p>Texte sélectionné : <b id="texte-sortie"></b></p>
JavaScript
function onMouseUp(e) {
const activeTextarea = document.activeElement;
const selection = activeTextarea.value.substring(
activeTextarea.selectionStart,
activeTextarea.selectionEnd,
);
const outputElement = document.getElementById("element-sortie");
const outputText = document.getElementById("texte-sortie");
outputElement.textContent = activeTextarea.id;
outputText.textContent = selection;
}
const textarea1 = document.getElementById("ta-exemple-un");
const textarea2 = document.getElementById("ta-exemple-deux");
textarea1.addEventListener("mouseup", onMouseUp, false);
textarea2.addEventListener("mouseup", onMouseUp, false);
Résultat
Spécifications
| Specification |
|---|
| HTML # dom-documentorshadowroot-activeelement-dev |
Compatibilité des navigateurs
Voir aussi
- La méthode
Document.hasFocus()