Dokument: 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-Eigenschaft, eine schreibgeschützte Eigenschaft des Document-Interfaces, gibt das Element innerhalb des DOM zurück, das Tastaturereignisse wie keydown und keyup empfängt. Dies entspricht normalerweise dem fokussierten Element.

Welche Elemente fokussierbar sind, variiert je nach Plattform und den aktuellen Einstellungen des Browsers. Zum Beispiel sind in Safari, entsprechend der macOS-Standardverhalten, Elemente, die keine Texteingabeelemente sind, standardmäßig nicht fokussierbar. Dies gilt es sei denn, die Einstellung „Voller Tastaturzugriff“ ist in den Systemeinstellungen aktiviert.

In der Regel kann ein Benutzer die Tab-Taste drücken, um den Fokus auf der Seite zwischen fokussierbaren Elementen zu verschieben, und Tastaturgesten wie Leerzeichen oder Eingabe verwenden, um Klicks auf das fokussierte Element zu simulieren.

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

Wert

Das tiefste Element, das derzeit den Fokus hat.

Wenn sich das fokussierte Element innerhalb eines Shadow-Trees im aktuellen Dokument befindet (zum Beispiel ist das fokussierte Element in einem iframe, und das aufrufende document enthält dieses iframe), dann ist dies das Wurzelelement dieses Trees (in diesem Beispiel das iframe).
Wenn sich das fokussierte Element in einem Dokumentbaum befindet, der nicht vom aktuellen Dokument abstammt (zum Beispiel ist das fokussierte Element im Hauptdokument, und das aufrufende document ist ein eingebettetes iframe), dann ist dies null.
Wenn kein fokussiertes Element vorhanden ist, ist dies Document.body oder Document.documentElement.

Beispiele

HTML

html

<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 # dom-documentorshadowroot-activeelement-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Document.hasFocus