HTMLTextAreaElement: selectionchange — Ereignis · JavaScript-Referenz

Signatur

textarea.addEventListener("selectionchange", handler)

Beschreibung

Das Ereignis selectionchange gehört zur Selection API und wird direkt an einem HTMLTextAreaElement ausgelöst, sobald sich dessen Auswahlbereich ändert. Dazu zählen nicht nur markierte Textbereiche, sondern auch reine Bewegungen des Textcursors (z. B. per Pfeiltaste oder Mausklick): Ein Cursor ist eine Auswahl mit selectionStart === selectionEnd.

Sie registrieren den Handler entweder mit addEventListener("selectionchange", handler) oder über die Eigenschaft onselectionchange. Das Ereignisobjekt ist ein gewöhnliches Event ohne Zusatzdaten. Die aktuelle Auswahl lesen Sie deshalb im Handler über textarea.selectionStart, textarea.selectionEnd und textarea.selectionDirection aus.

Typische Einsatzfälle sind Editor-Funktionen: Zeilen- und Spaltenanzeige, ein Zähler für die markierten Zeichen, kontextabhängige Formatierungsleisten oder Autovervollständigung an der Cursorposition. Anders als das Ereignis select, das nur beim Markieren von Text feuert, meldet selectionchange jede Änderung, also auch das Aufheben einer Markierung und reine Cursorbewegungen.

Das Ereignis ist nicht abbrechbar (cancelable: false). Auch programmatische Änderungen über setSelectionRange(), select() oder das Setzen von selectionStart/selectionEnd lösen es aus.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"selectionchange"`.
$handler Pflicht	(event: Event) => void		Callback, der bei jeder Auswahländerung aufgerufen wird. `event.target` ist das betroffene `<textarea>`.
$options	boolean \| AddEventListenerOptions	false	Optionale Einstellungen wie `once`, `passive`, `capture` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein Event-Objekt ohne auswahlspezifische Eigenschaften.

Beispiele

Cursorposition und Auswahl anzeigen

const textarea = document.querySelector('#editor');
const status = document.querySelector('#status');

textarea.addEventListener('selectionchange', () => {
  const { selectionStart: start, selectionEnd: end } = textarea;
  status.textContent = start === end
    ? `Cursor an Position ${start}`
    : `Auswahl ${start}–${end} (${end - start} Zeichen)`;
});

Cursor an Position 12 Auswahl 4–15 (11 Zeichen)

Zeile und Spalte wie in einem Code-Editor

const textarea = document.querySelector('textarea');
const anzeige = document.querySelector('#zeile-spalte');

const aktualisieren = () => {
  const vorher = textarea.value.slice(0, textarea.selectionEnd);
  const zeilen = vorher.split('\n');
  const zeile = zeilen.length;
  const spalte = zeilen.at(-1).length + 1;
  anzeige.textContent = `Zeile ${zeile}, Spalte ${spalte}`;
};

// Variante über die on-Property
textarea.onselectionchange = aktualisieren;

Zeile 3, Spalte 8

Gedrosselt auswerten und sauber entfernen

const textarea = document.querySelector('textarea');
let geplant = false;

const onSelectionChange = () => {
  if (geplant) return;
  geplant = true;
  requestAnimationFrame(() => {
    geplant = false;
    const markiert = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
    const woerter = markiert.trim() ? markiert.trim().split(/\s+/).length : 0;
    console.log(`Markierte Wörter: ${woerter}`);
  });
};

textarea.addEventListener('selectionchange', onSelectionChange);

// Später, z. B. beim Schließen des Editors:
const editorSchliessen = () => {
  textarea.removeEventListener('selectionchange', onSelectionChange);
};

Markierte Wörter: 5

Auch programmatische Änderungen lösen das Ereignis aus

const textarea = document.createElement('textarea');
textarea.value = 'Hallo Welt';
document.body.append(textarea);

textarea.addEventListener('selectionchange', () => {
  console.log('Neue Auswahl:', textarea.selectionStart, textarea.selectionEnd);
});

textarea.focus();
textarea.setSelectionRange(6, 10); // markiert "Welt"

Neue Auswahl: 6 10

// Wichtig · Fallstricke

Browser-Kompatibilität: Firefox unterstützt das Ereignis an <textarea> und <input> seit Version 92. In Chrome/Edge gibt es es erst ab Version 127, in Safari ab Version 17. Ältere Browser lösen selectionchange nur an document aus. Als Ausweichlösung dienen document.addEventListener('selectionchange', …) mit Prüfung auf document.activeElement oder die Ereignisse keyup, mouseup und input.
Nicht mit document-selectionchange verwechseln: Die Auswahl in Textfeldern ist nicht Teil von window.getSelection(). Lesen Sie immer selectionStart/selectionEnd des Elements aus.
Häufige Auslösung: Beim Ziehen mit der Maus oder bei gedrückter Umschalttaste feuert das Ereignis sehr oft. Aufwendige Arbeit sollten Sie drosseln, z. B. mit requestAnimationFrame oder einem Debounce.
Keine Endlosschleifen: Wer im Handler setSelectionRange() aufruft, löst das Ereignis erneut aus. Bauen Sie eine Abbruchbedingung ein.
Das Ereignis ist nicht abbrechbar. preventDefault() verhindert die Auswahländerung nicht.
Der Unterschied zu select: select feuert nur, wenn Text markiert wird, selectionchange auch bei Cursorbewegungen und beim Aufheben einer Markierung.

Siehe auch

HTMLTextAreaElement HTMLTextAreaElement.selectionStart HTMLTextAreaElement.selectionEnd HTMLTextAreaElement.setSelectionRange() Window.getSelection()