HTMLTextAreaElement: selectionchange-Ereignis

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 Bereich von Zeichen als auch das Verschieben des Cursors.

Dieses Ereignis kann nicht abgebrochen werden.

Das Ereignis wird üblicherweise verarbeitet, indem man einen Ereignislistener auf das <textarea> hinzufügt und in der Handlerfunktion die selectionStart-, selectionEnd- und selectionDirection-Eigenschaften des HTMLTextAreaElement ausliest.

Es ist auch möglich, einen Listener auf den globalen 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 Textauswahlen zu erhalten.

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