Document.activeElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété en lecture seule activeElement, rattachée à l'interface Document, renvoie l'élément (l'objet Element qui lui correspond) contenu dans le DOM et qui a le focus à cet instant.

La plupart du temps, activeElement renverra un objet HTMLInputElement ou HTMLTextAreaElement 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és selectionStart et selectionEnd 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'attribut type vaut "button", "checkbox", ou "radio".

Généralement, une personne utilise la touche Tabulation pour déplacer le focus entre les éléments qui peuvent le recevoir et utilise la touche Espace 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éthode window.getSelection().

Valeur

Un objet Element correspondant à l'élément qui a le focus, <body> ou null si aucun élément n'a le focus.

Exemples

HTML

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="output-element"></b></p>
<p>Texte sélectionné : <b id="output-text"></b></p>

JavaScript

js
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);

Résultat

must be provided

Spécifications

Specification
HTML
# dom-documentorshadowroot-activeelement-dev

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
activeElement

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.