HTMLInputElement: selectionchange — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("selectionchange", handler)

Beschreibung

Das Ereignis selectionchange gehört zur Selection API. Es wird direkt am Textfeld ausgelöst, wenn sich die Auswahl darin ändert, z. B. beim Markieren mit Maus oder Tastatur, beim Bewegen des Cursors (leere Auswahl) oder durch Programmcode wie setSelectionRange(), select() bzw. das Setzen von selectionStart/selectionEnd.

Registrieren kannst du den Handler mit addEventListener("selectionchange", handler) oder über die Eigenschaft onselectionchange. Das Ereignis-Objekt ist ein einfaches Event ohne Zusatzdaten. Die aktuelle Auswahl liest du im Handler über selectionStart, selectionEnd und selectionDirection des Elements aus.

Wichtig: document.getSelection() bzw. window.getSelection() liefert für die Auswahl innerhalb von Formularfeldern keine brauchbaren Daten. Für Textfelder musst du deshalb mit den Selection-Eigenschaften des Elements arbeiten. Typische Einsatzfälle sind Editor-Werkzeugleisten (z. B. „Fett“-Knopf aktivieren, sobald Text markiert ist), eine Anzeige der Cursorposition, Zeichenzähler für die Markierung oder das Merken und Wiederherstellen der Cursorposition.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"selectionchange"`.
$handler Pflicht	(event: Event) => void		Callback, der bei jeder Änderung der Auswahl aufgerufen wird. `event.target` ist das betroffene `<input>`- bzw. `<textarea>`-Element.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `passive`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener() gibt nichts zurück. Das Ereignis selbst ist ein Event. Es steigt im DOM auf (bubbles), kann aber nicht abgebrochen werden (cancelable: false).

Beispiele

Auswahl in einem Eingabefeld live anzeigen

// HTML: <input id="name" value="Hallo Welt"> <p id="info"></p>
const input = document.querySelector('#name');
const info = document.querySelector('#info');

input.addEventListener('selectionchange', () => {
  const { selectionStart, selectionEnd, selectionDirection, value } = input;
  const markiert = value.slice(selectionStart, selectionEnd);
  info.textContent = `Start: ${selectionStart}, Ende: ${selectionEnd}, Richtung: ${selectionDirection}, Text: "${markiert}"`;
});

// Programmatische Änderung löst das Ereignis ebenfalls aus
input.focus();
input.setSelectionRange(0, 5);

Start: 0, Ende: 5, Richtung: forward, Text: "Hallo"

Werkzeugleisten-Knopf über onselectionchange steuern

// HTML: <textarea id="editor"></textarea> <button id="fett" disabled>Fett</button>
const editor = document.querySelector('#editor');
const fettBtn = document.querySelector('#fett');

// Nur aktiv, wenn tatsächlich Text markiert ist
editor.onselectionchange = () => {
  fettBtn.disabled = editor.selectionStart === editor.selectionEnd;
};

fettBtn.addEventListener('click', () => {
  const { selectionStart: s, selectionEnd: e, value } = editor;
  editor.setRangeText(`**${value.slice(s, e)}**`, s, e, 'select');
  editor.focus();
});

Listener per AbortController wieder entfernen

const feld = document.querySelector('#name');
const controller = new AbortController();

const zeigeCursor = (event) => {
  console.log('Cursor bei Position', event.target.selectionStart);
};

feld.addEventListener('selectionchange', zeigeCursor, { signal: controller.signal });

// Später: Überwachung beenden
setTimeout(() => {
  controller.abort(); // alternativ: feld.removeEventListener('selectionchange', zeigeCursor)
  console.log('Listener entfernt');
}, 10_000);

Cursor bei Position 3 … Listener entfernt

// Wichtig · Fallstricke

Browser-Kompatibilität: Das Ereignis direkt an Textfeldern gibt es erst seit Firefox 92, Safari 17 und Chrome/Edge 127. Ältere Browser lösen selectionchange nur am document aus, und dort ohne verwertbare Daten für Formularfelder. Prüfe die Unterstützung mit 'onselectionchange' in HTMLInputElement.prototype. Als Ausweichlösung kannst du auf select, keyup, mouseup und input hören.
Das Ereignis wird asynchron ausgelöst und bei schnellen Änderungen teilweise zusammengefasst. Verlass dich also nicht darauf, für jede einzelne Cursorbewegung genau ein Ereignis zu bekommen.
Es feuert auch bei leerer Auswahl, also bei jeder Cursorbewegung. Prüfe selectionStart !== selectionEnd, wenn dich nur echte Markierungen interessieren.
document.getSelection() gibt die Auswahl innerhalb von <input>/<textarea> nicht zuverlässig wieder. Nutze stattdessen selectionStart/selectionEnd des Elements.
Bei Eingabetypen ohne Auswahl-Unterstützung (z. B. type="number", "email", "date") sind selectionStart/selectionEnd null, und das Ereignis wird nicht zuverlässig ausgelöst.
Das Ereignis lässt sich nicht abbrechen: preventDefault() hat keine Wirkung. Halte den Handler schlank oder drossle ihn, denn er kann sehr häufig laufen.

Siehe auch

HTMLInputElement.setSelectionRange() HTMLInputElement.selectionStart HTMLInputElement.selectionEnd HTMLInputElement.setRangeText() Selection XRLightProbe: reflectionchange