HTMLInputElement: selectionchange Ereignis

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 Bewegungen des Cursors.

Dieses Ereignis kann nicht abgebrochen werden.

Das Ereignis wird üblicherweise durch das Hinzufügen eines Ereignis-Listeners auf dem <input> verarbeitet, und in der Handler-Funktion werden die Eigenschaften selectionStart, selectionEnd und selectionDirection des HTMLInputElement ausgelesen.

Es ist auch möglich, einen Listener auf den onselectionchange Ereignishandler zu setzen und innerhalb der Handler-Funktion Document.getSelection() zu verwenden, um die Selection zu erhalten. Dies ist jedoch nicht sehr nützlich, um Änderungen an _Text_auswahlen zu erfassen.

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>

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