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 aufrufendedocument
enthält dieses iframe), dann ist dies das Wurzelelement dieses Trees (in diesem Beispiel dasiframe
). - 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 diesnull
. - Wenn kein fokussiertes Element vorhanden ist, ist dies
Document.body
oderDocument.documentElement
.
Beispiele
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