HTMLInputElement.select() — Methode · JavaScript-Referenz

Signatur

HTMLInputElement.prototype.select()

Beschreibung

select() markiert den kompletten Inhalt eines Eingabefelds. Das entspricht dem Setzen von selectionStart = 0 und selectionEnd = value.length. Die Methode funktioniert bei <input>-Elementen der Typen text, search, url, tel, password und bei <textarea> (HTMLTextAreaElement.select()). Bei Typen wie number oder email markiert sie in den meisten Browsern trotzdem den Text, die Auswahl lässt sich dort aber nicht über selectionStart/selectionEnd auslesen.

Typische Anwendungsfälle sind Felder, die beim Anklicken ihren ganzen Inhalt markieren sollen (Freigabe-Links, API-Schlüssel, Gutscheincodes), das Vorbereiten eines Kopiervorgangs und die Fehlerbehandlung in Formularen: Nach einer fehlgeschlagenen Prüfung wird der ungültige Wert markiert, damit Nutzer ihn direkt überschreiben können.

select() setzt in den meisten Browsern auch den Fokus auf das Element und löst das Ereignis select aus. Wenn nur ein Teil des Textes markiert werden soll, nimm stattdessen setSelectionRange().

Beispiele

Freigabe-Link beim Fokussieren komplett markieren

// <input id="share" type="text" value="https://example.com/s/abc123" readonly>
const share = document.querySelector('#share');

share.addEventListener('focus', () => share.select());
// Mausklick hebt die Auswahl sonst wieder auf, deshalb auch hier:
share.addEventListener('mouseup', (e) => e.preventDefault());

Text markieren und in die Zwischenablage kopieren

// <input id="apiKey" value="sk_live_9f8e7d6c" readonly>
// <button id="copy">Kopieren</button>
const input = document.querySelector('#apiKey');

document.querySelector('#copy').addEventListener('click', async () => {
  input.select(); // visuelles Feedback für Nutzer
  try {
    await navigator.clipboard.writeText(input.value);
    console.log('Kopiert:', input.value);
  } catch (err) {
    console.error('Kopieren fehlgeschlagen:', err);
  }
});

Kopiert: sk_live_9f8e7d6c

Ungültige Eingabe nach Validierung markieren

// <form id="f"><input id="plz" type="text" value="12a45"><button>Senden</button></form>
const form = document.querySelector('#f');
const plz = document.querySelector('#plz');

form.addEventListener('submit', (e) => {
  if (!/^\d{5}$/.test(plz.value)) {
    e.preventDefault();
    plz.select(); // Nutzer kann den falschen Wert direkt überschreiben
    console.log(plz.selectionStart, plz.selectionEnd);
  }
});

0 5

Auf das select-Ereignis reagieren

const field = document.querySelector('input[type="text"]');

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

field.value = 'Hallo Welt';
field.select();

Markiert: "Hallo Welt"

// Wichtig · Fallstricke

Fokus: In Chrome und Firefox fokussiert select() das Element. Auf iOS Safari hat select() oft keine sichtbare Wirkung. Zuverlässiger ist dort input.focus(); input.setSelectionRange(0, input.value.length);, und zwar innerhalb einer direkten Nutzeraktion.
Das Ereignis select kommt asynchron: Es wird nicht sofort beim Aufruf ausgelöst, sondern erst später. Verlasse dich also nicht darauf, dass es direkt nach select() schon eingetroffen ist.
Nicht unterstützte Typen: Bei checkbox, radio, range, color, file usw. passiert nichts, und es wird auch kein Fehler geworfen. Bei email und number wirft ein Zugriff auf selectionStart oder setSelectionRange() einen Fehler (InvalidStateError) bzw. liefert null.
Mausklick hebt die Markierung auf: Wer select() im focus-Handler aufruft, verliert die Auswahl oft durch das folgende mouseup. Abhilfe: preventDefault() im mouseup-Handler oder select() im click-Handler aufrufen.
Zwischenablage: Das früher übliche Muster select() plus document.execCommand('copy') ist veraltet. Nutze die Clipboard API navigator.clipboard.writeText(), die einen sicheren Kontext (HTTPS) voraussetzt.
Bei disabled-Feldern hat die Methode keine Wirkung. Bei readonly-Feldern funktioniert sie dagegen.

Siehe auch

HTMLInputElement.stepUp() HTMLInputElement.stepDown() HTMLInputElement.setRangeText() HTMLInputElement.showPicker() HTMLInputElement.checkValidity()