HTMLInputElement: 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 die Textauswahl innerhalb eines <input>-Elements geändert wird. Dies umfasst sowohl Änderungen im ausgewählten Zeichenbereich als auch das Bewegen der Einfügemarke.

Dieses Ereignis ist nicht abbrechbar.

Hinweis: Wenn Sie die Auswahl programmgesteuert ändern, zum Beispiel durch Aufruf von setSelectionRange(), wird die Auswahl sofort aktualisiert, aber das selectionchange-Ereignis wird als Aufgabe in die Warteschlange gestellt. Seine 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 üblicherweise durch Hinzufügen eines Ereignis-Listeners an das <input> verarbeitet, und in der Handlerfunktion durch die selectionStart, selectionEnd und selectionDirection-Eigenschaften des HTMLInputElement ausgelesen.

Es ist auch möglich, einen Listener auf dem onselectionchange-Ereignishandler hinzuzufügen und innerhalb der Handlerfunktion 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 /><input id="my-text" rows="2" cols="20" />
</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;
});