HTMLTextAreaElement: selectionchange-Ereignis

Das selectionchange-Ereignis der Selection API wird ausgelöst, wenn die Textauswahl innerhalb eines <textarea>-Elements geändert wird. Dies schließt sowohl Änderungen im ausgewählten Zeichenbereich als auch das Bewegen der Einfügemarke ein.

Dieses Ereignis kann nicht abgebrochen werden.

Normalerweise wird das Ereignis verarbeitet, indem ein Ereignislistener auf das <textarea> hinzugefügt wird. In der Handler-Funktion werden die Eigenschaften selectionStart, selectionEnd und selectionDirection des HTMLTextAreaElement ausgelesen.

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

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>

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