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.

Das selectionchange Ereignis der Selection API wird ausgelöst, wenn die Textauswahl innerhalb eines <textarea> Elements verändert wird. Dies umfasst sowohl Änderungen im ausgewählten Zeichenbereich als auch Bewegungen des Cursors.

Dieses Ereignis kann nicht abgebrochen werden.

Hinweis: Wenn Sie die Auswahl programmatisch ändern, beispielsweise durch Aufruf von setSelectionRange(), wird die Auswahl sofort aktualisiert, aber das selectionchange Ereignis wird als Aufgabe in die Warteschlange gestellt. Dessen Listener werden später ausgeführt, nachdem das aktuelle Skript die Ausführung beendet hat. Dies steht im Gegensatz zu Ereignissen wie focus und click, deren Listener synchron ausgeführt werden, wenn sie durch focus() und click() ausgelöst werden.

Das Ereignis wird in der Regel verarbeitet, indem ein Ereignis-Listener auf das <textarea> hinzugefügt wird und in der Handler-Funktion durch die selectionStart, selectionEnd und selectionDirection Eigenschaften des HTMLTextAreaElement gelesen wird.

Es ist auch möglich, einen Listener für den globalen onselectionchange Ereignishandler hinzuzufügen und innerhalb der Handler-Funktion Document.getSelection() zu verwenden, um die Selection zu erhalten. Dies ist jedoch nicht sehr nützlich, um Änderungen an Text-Auswahlen zu erhalten.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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

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;
});