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 sich die Textauswahl innerhalb eines <input>-Elements in ihrem Umfang oder ihrer Richtung ändert – unabhängig davon, ob die Auswahl aus einer Einfügemarke oder einem Zeichenbereich besteht.

Dieses Ereignis kann nicht abgebrochen werden.

Hinweis: Wenn Sie die Auswahl programmgesteuert ä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 beendet ist. Im Gegensatz dazu werden die Listener von Ereignissen wie focus und click synchron ausgeführt, wenn diese durch focus() beziehungsweise click() ausgelöst werden.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft des Interfaces zuweisen:

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