HTMLTextAreaElement: selectionchange-Event

Baseline 2024
Newly available

Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Dieses Ereignis ist nicht abbrechbar.

Das Ereignis wird üblicherweise verarbeitet, indem ein Ereignis-Listener auf das <textarea> hinzugefügt wird, und 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-Event-Handler hinzuzufügen 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 erhalten.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Event-Handler-Eigenschaft.

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

onselectionchange = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Das folgende Beispiel zeigt, wie der im <textarea>-Element ausgewählte Text abgerufen wird.

HTML

html
<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>

JavaScript

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

Ergebnis

Spezifikationen

Specification
Selection API
# selectionchange-event
Selection API
# dom-globaleventhandlers-onselectionchange

Browser-Kompatibilität