Signatur
Beschreibung
Die Eigenschaft autocomplete spiegelt das gleichnamige HTML-Attribut eines <select>-Elements. Sie ist ein String und gibt dem Browser (bzw. dem Passwort- oder Adressmanager) einen Hinweis, ob er den Wert des Auswahlfelds automatisch vorbelegen darf und welche Art von Daten erwartet wird.
Neben "on" und "off" sind vor allem die Autofill-Feldnamen nützlich, etwa "country", "country-name", "address-level1" (Bundesland), "bday-month", "cc-exp-month" oder "sex". Sie lassen sich mit Abschnitts- und Kontext-Token kombinieren, z. B. "section-rechnung billing country" oder "shipping country".
Typische Einsatzfälle sind Checkout- und Registrierungsformulare, in denen Länder-, Bundesland- oder Ablaufdatum-Dropdowns vom Browser korrekt vorausgefüllt werden sollen. Per JavaScript setzt man die Eigenschaft vor allem bei dynamisch erzeugten Formularen oder wenn man Autofill gezielt abschalten möchte.
Ist das Attribut nicht gesetzt, liefert die Eigenschaft einen leeren String ""; der Browser übernimmt dann den Wert des autocomplete-Attributs des umgebenden <form>-Elements bzw. sein Standardverhalten.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: ein oder mehrere durch Leerzeichen getrennte Autofill-Token, z. B. "off", "country" oder "shipping address-level1". Wird unverändert ins Attribut geschrieben. |
Rückgabewert
autocomplete-Attributs, z. B. "on", "off", "country", oder "", wenn das Attribut fehlt.Beispiele
Wert auslesen
// HTML: <select id="land" autocomplete="country">…</select>
const land = document.querySelector('#land');
console.log(land.autocomplete);
console.log(land.getAttribute('autocomplete'));Dynamisches Checkout-Formular mit Autofill-Hinweisen
const felder = [
{ name: 'lieferland', token: 'shipping country', optionen: ['DE', 'AT', 'CH'] },
{ name: 'rechnungsland', token: 'billing country', optionen: ['DE', 'AT', 'CH'] }
];
const form = document.createElement('form');
for (const { name, token, optionen } of felder) {
const select = document.createElement('select');
select.name = name;
select.autocomplete = token; // Hinweis für den Adressmanager
select.append(...optionen.map((code) => new Option(code, code)));
form.append(select);
}
document.body.append(form);
console.log([...form.elements].map((el) => el.autocomplete));Autofill gezielt abschalten
// Z. B. für ein Filter-Dropdown, das nichts mit Nutzerdaten zu tun hat
const filter = document.querySelector('select[name="sortierung"]');
filter.autocomplete = 'off';
console.log(filter.outerHTML.includes('autocomplete="off"'));Fehlendes Attribut erkennen
const select = document.createElement('select');
console.log(JSON.stringify(select.autocomplete));
// Fallback auf das Formular-Attribut prüfen
const effektiv = (el) => el.autocomplete || el.form?.autocomplete || 'on';
console.log(effektiv(select));// Wichtig · Fallstricke
- Nur ein Hinweis: Browser dürfen
autocompleteignorieren. Insbesondere"off"wird von manchen Browsern und Passwort-Managern nicht respektiert. - Keine Validierung: Beim Setzen wird der String ungeprüft übernommen; Tippfehler wie
"contry"führen einfach dazu, dass Autofill nicht greift. - Leerer String statt
"on": Fehlt das Attribut, ist der Wert""– nicht der effektiv wirksame Wert. Den Formular-Fallback muss man bei Bedarf selbst auswerten. - Autofill-Wert muss passen: Der Browser kann nur eine Option auswählen, deren
valueoder Text zu den gespeicherten Daten passt (z. B. Ländercode"DE"oder „Deutschland“). - Kompatibilität: Die IDL-Eigenschaft ist in Chrome/Edge seit Längerem verfügbar, in Firefox erst ab Version 110 und in Safari ab 16.4. Das HTML-Attribut selbst wird schon länger ausgewertet; in älteren Browsern hilft
setAttribute('autocomplete', …). - Datenschutz: Sensible Felder (z. B.
cc-exp-month) nur über HTTPS ausliefern – viele Browser bieten Zahlungs-Autofill sonst nicht an.