Document.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 seuleactiveElement, rattachée à l'interfaceDocument, renvoie l'élément (l'objetElement qui lui correspond) contenu dans le DOM et qui a le focus à cet instant.

La plupart du temps,activeElement renverra un objetHTMLInputElement ouHTMLTextAreaElement si le texte de celui-ci est sélectionné au moment de l'appel. Si tel est le cas, il est possible d'obtenir plus de détails à l'aide des propriétésselectionStart etselectionEnd de l'objet. Dans les autres cas, l'élément avec le focus pourra être un élément<select> (menu) ou un élément<input> dont l'attributtype vaut"button","checkbox", ou"radio".

Généralement, une personne utilise la toucheTabulation pour déplacer le focus entre les éléments qui peuvent le recevoir et utilise la toucheEspace pour activer l'élément (c'est-à-dire pour appuyer sur un bouton ou pour changer l'état d'un bouton radio). Les éléments qui peuvent recevoir le focus dépendent de la plateforme et de la configuration du navigateur. Ainsi, sur les systèmes macOS et par défaut, les éléments qui ne sont pas des champs de saisie texte ne peuvent pas recevoir le focus.

Note :Le focus (qui détermine l'élément qui recevra les informations saisies) n'est pas la même chose que la sélection (la partie actuellement surlignée dans le document). Pour accéder à la sélection courante, on pourra utiliser la méthodewindow.getSelection().

<p>Sélectionnez le texte d'une des zones de texte ci-après :</p><form>  <textarea name="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" 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></b></p><p>Texte sélectionné : <b></b></p>

JavaScript

function onMouseUp(e) {  const activeTextarea = document.activeElement;  const selection = activeTextarea.value.substring(    activeTextarea.selectionStart,    activeTextarea.selectionEnd,  );  const outputElement = document.getElementById("output-element");  const outputText = document.getElementById("output-text");  outputElement.innerHTML = activeTextarea.id;  outputText.innerHTML = 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);