HTMLTextAreaElement: select — Ereignis · JavaScript-Referenz

Signatur

textarea.addEventListener("select", handler)

Beschreibung

Das select-Ereignis tritt ein, wenn der Benutzer in einem <textarea>-Element Text markiert. Das gilt für die Maus (Ziehen, Doppelklick), für die Tastatur (z. B. Umschalt + Pfeiltasten, Strg+A) und auch für programmatische Auswahl mit HTMLTextAreaElement.select(), setSelectionRange() oder setRangeText() mit dem Modus "select".

Einen Handler registriert man mit addEventListener("select", handler) oder über die Eigenschaft onselect. Der Handler bekommt ein einfaches Event-Objekt. Welcher Text markiert ist, verrät das Ereignis nicht selbst. Den Bereich liest man über event.target.selectionStart und event.target.selectionEnd aus.

Typische Einsatzfälle sind eine Wortzahl für den markierten Text, eine kleine Formatierungsleiste in einfachen Markdown-Editoren oder die Übernahme der Markierung in eine Suche. Das Ereignis steigt im DOM auf (bubbles: true) und lässt sich nicht abbrechen. Mit preventDefault() kann man eine Auswahl also nicht verhindern.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Name des Ereignisses, hier immer `"select"`.
$handler Pflicht	(event: Event) => void		Die Rückruffunktion. Sie bekommt ein `Event`, dessen `target` das `<textarea>` ist.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `passive`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein Event (nicht abbrechbar, steigt auf).

Beispiele

Markierten Text mit addEventListener auslesen

const textarea = document.querySelector('#notiz');

textarea.addEventListener('select', (event) => {
  const { selectionStart, selectionEnd, value } = event.target;
  const auswahl = value.substring(selectionStart, selectionEnd);
  console.log(`Markiert (${selectionStart}–${selectionEnd}): "${auswahl}"`);
});

Markiert (6–11): "Welt!"

Wortzahl der Markierung über die onselect-Eigenschaft

const textarea = document.querySelector('#artikel');
const anzeige = document.querySelector('#wortzahl');

textarea.onselect = () => {
  const text = textarea.value
    .slice(textarea.selectionStart, textarea.selectionEnd)
    .trim();
  const woerter = text ? text.split(/\s+/).length : 0;
  anzeige.textContent = `${woerter} Wörter markiert`;
};

// Handler wieder entfernen:
// textarea.onselect = null;

3 Wörter markiert

Programmatische Auswahl löst das Ereignis aus, danach removeEventListener

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

const onSelect = () => {
  console.log('select ausgelöst:', textarea.selectionStart, textarea.selectionEnd);
  textarea.removeEventListener('select', onSelect);
};

textarea.addEventListener('select', onSelect);
textarea.focus();
textarea.setSelectionRange(0, 5); // markiert „Hallo“

select ausgelöst: 0 5

Markierung per AbortController in Markdown fett formatieren

const textarea = document.querySelector('#editor');
const button = document.querySelector('#fett');
const controller = new AbortController();

textarea.addEventListener('select', () => {
  button.disabled = textarea.selectionStart === textarea.selectionEnd;
}, { signal: controller.signal });

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

// Später alle Listener aufräumen:
// controller.abort();

// Wichtig · Fallstricke

Nur Formularfelder: select wird nur von <textarea> und von <input> mit Textfeld ausgelöst, nicht bei Markierungen in normalem Seitentext. Für diese nutzt man document mit selectionchange zusammen mit window.getSelection().
Keine Meldung beim Aufheben: Wird die Markierung aufgehoben, etwa durch einen Klick ohne Ziehen, feuert select nicht zuverlässig. Wer jede Änderung braucht, sollte selectionchange direkt am <textarea> verwenden. Das unterstützen moderne Browser, Safari erst ab Version 17 (nicht getestet).
Häufiges Auslösen: Beim Erweitern der Markierung per Maus oder Tastatur kann das Ereignis mehrfach kommen. Aufwendige Handler (z. B. Netzwerkanfragen) sollte man drosseln (Debounce).
Nicht abbrechbar: event.preventDefault() hat keine Wirkung. Um Markierungen zu unterbinden, nutzt man die CSS-Eigenschaft user-select. Bei Textfeldern ist das allerdings nur begrenzt verlässlich.
Kompatibilität: select an Textfeldern funktioniert in allen Browsern. Dass auch programmatisches setSelectionRange() das Ereignis auslöst, entspricht der HTML-Spezifikation, ältere Browser machen das aber nicht immer gleich.
Nicht verwechseln: Die Methode HTMLTextAreaElement.select() markiert den ganzen Inhalt und löst dieses Ereignis aus. Sie ist nicht dasselbe wie das Ereignis.

Siehe auch

HTMLTextAreaElement.select() HTMLTextAreaElement.setSelectionRange() HTMLTextAreaElement.selectionStart HTMLTextAreaElement.selectionEnd Window.getSelection() EventTarget.addEventListener()