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 Juli 2015.
Die activeElement-Eigenschaft der Document-Schnittstelle gibt das Element innerhalb des DOM zurück, das momentan Tastatureingaben wie keydown und keyup empfängt. Dies entspricht normalerweise dem fokussierten Element.
Welche Elemente fokussierbar sind, variiert je nach Plattform und der aktuellen Konfiguration des Browsers. Zum Beispiel sind auf Safari, entsprechend dem Verhalten von macOS, Elemente, die keine Texteingabeelemente sind, standardmäßig nicht fokussierbar, es sei denn, die Einstellung "Volle Tastatursteuerung" ist in den Systemeinstellungen aktiviert.
Typischerweise kann ein Benutzer die Tab-Taste drücken, um den Fokus zwischen fokussierbaren Elementen auf der Seite zu bewegen, und Tastaturgesten wie Leertaste oder Eingabetaste verwenden, um Klicks auf das fokussierte Element zu simulieren.
Hinweis:
Fokus (welches Element Benutzereingaben empfängt) ist nicht dasselbe wie Auswahl (der aktuell markierte Teil des Dokuments). Sie können die aktuelle Auswahl mit window.getSelection() abrufen.
Wert
Das tiefste Element, das aktuell den Fokus hat.
- Wenn das fokussierte Element innerhalb eines Shadow Trees im aktuellen Dokument ist (zum Beispiel, das fokussierte Element befindet sich innerhalb eines
iframe, und das aufrufendedocumententhält diesesiframe), dann ist dies das Wurzelelement dieses Trees (in diesem Beispiel diesesiframe). - Wenn das fokussierte Element innerhalb eines Dokumentbaums, der nicht vom aktuellen Dokument abstammt, ist (zum Beispiel, das fokussierte Element ist im Hauptdokument, und das aufrufende
documentist ein eingebettetesiframe), dann ist diesnull. - Wenn kein Element fokussiert ist, 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
| Specification |
|---|
| HTML # dom-documentorshadowroot-activeelement-dev |
Browser-Kompatibilität
Loading…