Dokument: activeElement Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die schreibgeschützte activeElement-Eigenschaft der Document-Schnittstelle gibt das Element innerhalb des DOMs zurück, das Tastaturereignisse wie keydown und keyup empfängt. Dies ist in der Regel das fokussierte Element.
Welche Elemente fokussierbar sind, variiert je nach Plattform und aktueller Konfiguration des Browsers. Zum Beispiel sind in Safari, entsprechend dem Verhalten von macOS, Elemente, die keine Texteingabeelemente sind, standardmäßig nicht fokussierbar, es sei denn, die Einstellung "Voller Tastaturzugriff" ist in den Systemeinstellungen aktiviert.
Normalerweise kann ein Benutzer die Tab-Taste drücken, um den Fokus zwischen den fokussierbaren Elementen auf der Seite zu verschieben, und Tastaturgesten wie Leertaste oder Eingabetaste verwenden, um Klicks auf das fokussierte Element zu simulieren.
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() abrufen.
Wert
Das tiefste Element, das derzeit den Fokus hat.
- Wenn das fokussierte Element sich in einem Schattenbaum innerhalb des aktuellen Dokuments befindet (zum Beispiel, das fokussierte Element ist innerhalb eines
iframe, und das aufrufendeDokumententhält dieses iframe), dann wird dies das Wurzelelement dieses Baumes sein (in diesem Beispiel, diesesiframe). - Wenn das fokussierte Element sich in einem Dokumentbaum befindet, der nicht vom aktuellen Dokument abstammt (zum Beispiel, das fokussierte Element ist im Hauptdokument, und das aufrufende
Dokumentist ein eingebettetes iframe), dann wird diesnullsein. - Wenn es kein fokussiertes Element gibt, ist dies das
Document.bodyoderDocument.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);
textarea2.addEventListener("mouseup", onMouseUp);
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-documentorshadowroot-activeelement-dev |