HTMLTextAreaElement: selectionchange-Ereignis

Baseline 2024

Neu verfügbar

Seit September 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das selectionchange-Ereignis der Selection API wird ausgelöst, wenn sich die Textauswahl innerhalb eines <textarea>-Elements ändert. Dazu gehören sowohl Änderungen am ausgewählten Zeichenbereich als auch Bewegungen der Einfügemarke.

Dieses Ereignis kann nicht abgebrochen werden.

Hinweis: Wenn Sie die Auswahl programmatisch ändern, beispielsweise durch einen Aufruf von setSelectionRange(), wird die Auswahl sofort aktualisiert. Das selectionchange-Ereignis wird jedoch als Task in die Warteschlange gestellt. Seine Listener werden erst später ausgeführt, nachdem das aktuelle Skript vollständig ausgeführt wurde. Im Gegensatz dazu werden die Listener von Ereignissen wie focus und click synchron ausgeführt, wenn diese durch focus() beziehungsweise click() ausgelöst werden.

Üblicherweise wird das Ereignis verarbeitet, indem dem <textarea> ein Event-Listener hinzugefügt wird. In dessen Handler-Funktion werden die Eigenschaften selectionStart, selectionEnd und selectionDirection von HTMLTextAreaElement ausgelesen.

Sie können auch über den globalen Event-Handler onselectionchange einen Listener hinzufügen. Beachten Sie jedoch, dass dadurch gegebenenfalls andere über onselectionchange hinzugefügte Event-Listener ersetzt werden. Innerhalb der Handler-Funktion können Sie dann mit Document.getSelection() die Selection abrufen. Um Änderungen an einer Textauswahl zu erfassen, ist dies allerdings wenig hilfreich.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

addEventListener("selectionchange", (event) => { })

Alternativ können Sie der Event-Handler-Eigenschaft der Schnittstelle einen Wert zuweisen:

onselectionchange = (event) => { }

<div>
  Enter and select text here:<br /><textarea
    id="my-text"
    rows="2"
    cols="20"></textarea>
</div>
<div>selectionStart: <span id="start"></span></div>
<div>selectionEnd: <span id="end"></span></div>
<div>selectionDirection: <span id="direction"></span></div>

JavaScript

const myInput = document.getElementById("my-text");

myInput.addEventListener("selectionchange", () => {
  document.getElementById("start").textContent = myInput.selectionStart;
  document.getElementById("end").textContent = myInput.selectionEnd;
  document.getElementById("direction").textContent = myInput.selectionDirection;
});