HTMLInputElement: select — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("select", handler)

Beschreibung

Das select-Ereignis tritt an einem HTMLInputElement auf, wenn der Benutzer im Feld Text markiert oder wenn die Markierung per Skript gesetzt wird, z. B. mit HTMLInputElement.prototype.select(), setSelectionRange() oder setRangeText(). Ein Handler lässt sich mit addEventListener("select", handler) registrieren oder über die Eigenschaft onselect zuweisen.

Das Ereignis gibt es nur bei <input>-Typen, die eine Textauswahl haben: text, search, url, tel und password, außerdem bei <textarea>. Bei email, number und ähnlichen Typen liefern selectionStart/selectionEnd null, und das Ereignis wird meist nicht ausgelöst.

Typische Anwendungen sind kontextabhängige Werkzeugleisten (z. B. ein „Kopieren“-Knopf, der nur bei einer Markierung erscheint), das Protokollieren oder Auswerten des markierten Teils und die Abnahmeprüfung von Eingabemasken. Den markierten Text liefert input.value.substring(input.selectionStart, input.selectionEnd).

Das Ereignis ist ein einfaches Event (kein UIEvent mit Zusatzdaten). Es blubbert (bubbles: true) und ist nicht abbrechbar: preventDefault() kann die Markierung nicht verhindern.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier `"select"`.
$handler Pflicht	(event: Event) => void		Callback, der nach der Markierung aufgerufen wird. `event.target` ist das betroffene Eingabefeld.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `capture`, `passive` oder `signal` (zum Entfernen über einen `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein Event-Objekt.

Beispiele

Markierten Text mit addEventListener auslesen

const input = document.querySelector('#name');

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

// Markierung per Skript löst das Ereignis ebenfalls aus
input.value = 'Hallo Welt';
input.setSelectionRange(0, 5);

Markiert: "Hallo" (0–5)

Über die Eigenschaft onselect zuweisen und wieder entfernen

const suche = document.querySelector('input[type="search"]');
const status = document.querySelector('#status');

suche.onselect = () => {
  status.textContent = 'Text markiert – Strg+C zum Kopieren';
};

// Später: Handler entfernen
suche.onselect = null;

Kopieren-Knopf nur bei Markierung anzeigen (mit AbortController)

const feld = document.querySelector('#code');
const kopieren = document.querySelector('#kopieren');
const controller = new AbortController();
kopieren.hidden = true;

const markierterText = () =>
  feld.value.slice(feld.selectionStart, feld.selectionEnd);

feld.addEventListener('select', () => {
  kopieren.hidden = markierterText().length === 0;
}, { signal: controller.signal });

kopieren.addEventListener('click', async () => {
  await navigator.clipboard.writeText(markierterText());
  console.log('Kopiert:', markierterText());
}, { signal: controller.signal });

// Beide Listener auf einmal entfernen:
// controller.abort();

Kopiert: <markierter Text>

Ereignisdelegation: ein Listener für das ganze Formular

const formular = document.querySelector('form');

// select blubbert, deshalb reicht ein Listener am Formular
formular.addEventListener('select', (event) => {
  if (event.target instanceof HTMLInputElement) {
    console.log(`Auswahl in Feld "${event.target.name}"`);
  }
});

Auswahl in Feld "benutzer"

// Wichtig · Fallstricke

Kein Ereignis beim Aufheben der Markierung: Wird die Markierung durch einen Klick oder eine Cursorbewegung aufgehoben, gibt es kein select. Wer das mitbekommen muss, nutzt das Ereignis selectionchange. Dieses wird bei Eingabefeldern in aktuellen Browsern ebenfalls am <input> ausgelöst, in älteren Browsern nur am document.
Nicht abbrechbar: event.preventDefault() hat keine Wirkung. Um eine Markierung zu verhindern, nimmt man CSS user-select: none (wirkt in Eingabefeldern nur eingeschränkt) oder setzt die Auswahl im Handler zurück.
Häufig mehrfach ausgelöst: Beim Markieren mit Maus oder Umschalt+Pfeiltasten feuern manche Browser das Ereignis bei jeder Änderung. Aufwendige Logik sollte man daher entprellen.
Nicht bei jedem Typ: Bei type="email", number, date usw. gibt es keine Auswahl-API. Ein Zugriff auf setSelectionRange() wirft dort einen InvalidStateError.
Nicht mit dem Element verwechseln: Das <select>-Element (Auswahlliste) löst change/input aus, nicht dieses Ereignis. Für markierten Text im restlichen Dokument (außerhalb von Formularfeldern) sind window.getSelection() und selectionchange zuständig.
Kompatibilität: select an <input> und <textarea> wird von allen gängigen Browsern unterstützt. Auf Mobilgeräten kann der Zeitpunkt wegen der systemeigenen Markierungswerkzeuge abweichen.

Siehe auch

HTMLInputElement: search HTMLInputElement: cancel HTMLInputElement: invalid HTMLInputElement: selectionchange HTMLFormElement: reset