HTMLTextAreaElement: selectionchange event

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

Dieses Ereignis kann nicht abgebrochen werden.

Das Ereignis wird normalerweise verarbeitet, indem ein Ereignislistener auf das <textarea> hinzugefügt wird und in der Handlerfunktion die Eigenschaften selectionStart, selectionEnd und selectionDirection des HTMLTextAreaElement ausgelesen werden.

Es ist auch möglich, einen Listener am globalen onselectionchange-Ereignishandler hinzuzufügen und innerhalb der Handlerfunktion mittels Document.getSelection() die Selection abzurufen. Dies ist jedoch nicht sehr nützlich, um Änderungen an Textauswahlen zu erkennen.

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