Signatur
Beschreibung
Die Eigenschaft autocomplete spiegelt das gleichnamige HTML-Attribut eines <input>-Elements wider. Sie ist ein String und steuert, ob der Browser gespeicherte Werte vorschlagen oder das Feld automatisch ausfüllen darf. Solche Werte sind zum Beispiel frühere Eingaben, Adressen, Zahlungsdaten oder Zugangsdaten aus dem Passwortmanager.
Neben "on" und "off" gibt es viele Autofill-Token, die den erwarteten Inhalt genau beschreiben:
"email","name"und"tel"für Kontaktdaten"street-address"und"postal-code"für Adressen"username","current-password","new-password"und"one-time-code"für die Anmeldung"cc-number"und"cc-exp"für Kreditkarten
Die Token lassen sich mit Abschnitts- und Gruppenpräfixen kombinieren, etwa "section-lieferung shipping postal-code".
Solche präzisen Angaben verbessern die Nutzererfahrung und die Barrierefreiheit deutlich (WCAG 1.3.5 „Zweck von Eingaben bestimmen“). Passwortmanager erkennen die Felder damit zuverlässig, und Mobilgeräte bieten passende Vorschläge an.
Hat ein Feld kein eigenes Attribut, liefert die Eigenschaft einen leeren String. Der Browser übernimmt dann das autocomplete-Verhalten des übergeordneten <form>-Elements, das intern standardmäßig "on" ist.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: "on", "off" oder eine durch Leerzeichen getrennte Liste von Autofill-Token (z. B. "shipping email"). Der Wert wird in das HTML-Attribut geschrieben. |
Rückgabewert
autocomplete-Attributs. Fehlt das Attribut, ist es ein leerer String.Beispiele
Wert auslesen
// HTML: <input id="mail" type="email" autocomplete="email">
const mail = document.querySelector('#mail');
console.log(mail.autocomplete);
const ohne = document.createElement('input');
console.log(JSON.stringify(ohne.autocomplete));Registrierungsformular für Passwortmanager vorbereiten
const form = document.querySelector('#registrierung');
const felder = {
benutzer: 'username',
passwort: 'new-password',
passwortWdh: 'new-password',
telefon: 'tel'
};
for (const [name, token] of Object.entries(felder)) {
const input = form.elements.namedItem(name);
if (input) input.autocomplete = token;
}
console.log(form.elements.namedItem('passwort').getAttribute('autocomplete'));Einmalcode-Feld erzeugen und Adressfelder abschnittsweise auszeichnen
const otp = document.createElement('input');
otp.type = 'text';
otp.inputMode = 'numeric';
otp.autocomplete = 'one-time-code';
document.body.append(otp);
// Liefer- und Rechnungsadresse getrennt vorschlagen lassen
document.querySelector('#lieferPlz').autocomplete = 'section-liefer shipping postal-code';
document.querySelector('#rechnungPlz').autocomplete = 'section-rechnung billing postal-code';
console.log(otp.autocomplete);// Wichtig · Fallstricke
"off"wird oft ignoriert: Viele Browser (Chrome, Firefox, Safari) füllen Anmeldefelder trotzautocomplete="off"aus, damit Passwortmanager weiter funktionieren. Wenn Sie Vorschläge wirklich unterdrücken wollen, verwenden Sie"new-password"oder ein passendes, nicht zutreffendes Token. Zuverlässig ist das nicht.- Keine Sicherheitsmaßnahme: Wer das automatische Ausfüllen abschaltet, schützt damit keine sensiblen Daten. Das Setzen von
"off"bei Passwörtern verschlechtert eher die Sicherheit, weil Nutzer dann schwächere Passwörter wählen. - Einige Browser werten ein Attribut, das nachträglich per Skript geändert wird, erst beim nächsten Fokus oder Seitenaufbau aus. Setzen Sie den Wert deshalb möglichst schon im HTML.
- Ungültige Token-Kombinationen werden unverändert als String gespeichert. Der Browser behandelt das Feld dann aber so, als hätte es kein
autocomplete-Attribut. - Bei
type="hidden"und bei Checkboxen gelten eingeschränkte Regeln. Beitype="password"sollten Sie immercurrent-passwordodernew-passwordangeben. - Die Eigenschaft wird von allen modernen Browsern unterstützt. Welche Token tatsächlich zum automatischen Ausfüllen führen, ist je nach Browser unterschiedlich.