HTMLTextAreaElement.select() — Methode · JavaScript-Referenz

Signatur

HTMLTextAreaElement.prototype.select()

Beschreibung

Die Methode select() markiert den kompletten Text in einem <textarea>. Danach steht selectionStart auf 0 und selectionEnd auf value.length. Die Methode hat keine Parameter und liefert nichts zurück.

Typische Einsatzfälle sind „Alles markieren“-Schaltflächen, das Vorbereiten eines Code-Schnipsels oder generierten Texts zum Kopieren und das Hervorheben ungültiger Eingaben nach einer Prüfung, damit Nutzer den Text sofort überschreiben können.

In vielen Browsern bekommt das Element durch select() auch den Fokus. Darauf sollte man sich aber nicht verlassen: Wer sicher sein will, dass Tastatureingaben im Feld landen, ruft vorher focus() auf. Wenn nur ein Teil des Texts markiert werden soll, ist setSelectionRange() das passende Werkzeug.

Beispiele

Schaltfläche „Alles markieren“

const textarea = document.querySelector('#notiz');
const button = document.querySelector('#alles-markieren');

button.addEventListener('click', () => {
  textarea.focus();
  textarea.select();
  console.log(textarea.selectionStart, textarea.selectionEnd, textarea.value.length);
});

0 42 42 // bei 42 Zeichen Inhalt

Generierten Code markieren und in die Zwischenablage kopieren

const snippet = document.querySelector('#embed-code');
snippet.value = '<iframe src="https://example.com/widget"></iframe>';

document.querySelector('#kopieren').addEventListener('click', async () => {
  snippet.select(); // zeigt dem Nutzer, was kopiert wird
  try {
    await navigator.clipboard.writeText(snippet.value);
    console.log('Kopiert!');
  } catch (err) {
    console.error('Kopieren fehlgeschlagen:', err);
  }
});

Kopiert!

Beim Fokussieren automatisch alles markieren

const feld = document.querySelector('#vorlage');

feld.addEventListener('focus', () => {
  // Verzögern, damit der Mausklick die Markierung nicht sofort wieder aufhebt
  requestAnimationFrame(() => feld.select());
});

feld.addEventListener('select', () => {
  const markiert = feld.value.slice(feld.selectionStart, feld.selectionEnd);
  console.log(`Markiert: ${markiert.length} Zeichen`);
});

Markiert: 128 Zeichen

// Wichtig · Fallstricke

Fokus: Ob select() das Element fokussiert, unterscheidet sich zwischen den Browsern. Wenn der Fokus sicher gesetzt sein soll, vorher focus() aufrufen.
Klick setzt die Markierung zurück: Wird select() direkt in einem focus-Handler aufgerufen, kann der anschließende mouseup die Markierung wieder aufheben. Abhilfe: den Aufruf mit requestAnimationFrame oder setTimeout verzögern.
Mobilgeräte: Auf iOS Safari funktioniert select() manchmal nicht zuverlässig. setSelectionRange(0, textarea.value.length) ist dort robuster.
Deaktivierte Felder: Bei einem disabled-Textfeld hat die Methode keine sichtbare Wirkung. readonly-Felder lassen sich dagegen markieren.
Die Methode löst das select-Event aus. Erneute Aufrufe in diesem Event-Handler können eine Endlosschleife erzeugen.
Die Markierung allein kopiert nichts. Zum Kopieren navigator.clipboard.writeText() verwenden, denn document.execCommand('copy') ist veraltet.

Siehe auch

HTMLTextAreaElement.setSelectionRange() HTMLTextAreaElement.setRangeText() HTMLTextAreaElement.selectionStart HTMLTextAreaElement.selectionEnd HTMLInputElement.select() HTMLElement.focus() Clipboard.writeText()