Document: activeElement-Eigenschaft

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.

Die activeElement schreibgeschützte Eigenschaft der Document-Schnittstelle gibt das Element innerhalb des DOM zurück, das derzeit den Fokus hat.

Oft gibt activeElement ein HTMLInputElement oder HTMLTextAreaElement-Objekt zurück, wenn es zu diesem Zeitpunkt die Textauswahl hat. In diesem Fall können Sie mit den Eigenschaften selectionStart und selectionEnd des Objekts weitere Details erhalten. Andere Male könnte das fokussierte Element ein <select>-Element (Menü) oder ein <input>-Element sein.

Typischerweise kann ein Benutzer die Tabulatortaste drücken, um den Fokus auf der Seite zwischen fokussierbaren Elementen zu bewegen, und die Leertaste verwenden, um eines zu aktivieren (das heißt, um eine Schaltfläche zu drücken oder ein Optionsfeld umzuschalten). Welche Elemente fokussierbar sind, hängt von der Plattform und der aktuellen Konfiguration des Browsers ab. Beispielsweise sind auf macOS-Systemen Elemente, die keine Texteingabeelemente sind, standardmäßig nicht fokussierbar.

Hinweis: Fokus (welches Element Benutzereingabeereignisse empfängt) ist nicht dasselbe wie Auswahl (der aktuell hervorgehobene Teil des Dokuments). Sie können die aktuelle Auswahl mit window.getSelection() erhalten.

<p>Select some text from one of the text areas below:</p>

<form>
  <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">
This is Text Area One. 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-example-two" id="ta-example-two" rows="7" cols="40">
This is Text Area Two. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea
  >
</form>

<p>Active element ID: <em id="output-element"></em></p>
<p>Selected text: <em id="output-text"></em></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.textContent = activeTextarea.id;
  outputText.textContent = selection;
}

const textarea1 = document.getElementById("ta-example-one");
const textarea2 = document.getElementById("ta-example-two");
textarea1.addEventListener("mouseup", onMouseUp, false);
textarea2.addEventListener("mouseup", onMouseUp, false);

Ergebnis

Spezifikationen

Specification
HTML Standard # dom-documentorshadowroot-activeelement-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Document.hasFocus