Veröffentlicht: 10. Juni 2026
Formulare sind ein häufiger Interaktionspunkt im Web, aber sie verursachen auch eine Menge Reibung für Nutzer. Browser bieten schon lange Autofill-Funktionen an, um diese Reibung zu verringern. Nutzer müssen dann nicht mehr wiederholt Kreditkartennummern, Adressen und Anmeldedaten eingeben.
Für Entwickler ist die Verarbeitung von Autofill-Formularen eine Herausforderung. Entwickler können zwar auf input- oder change-Ereignisse für <form>-Elemente warten, aber diese Ereignisse geben nicht an, wie die Daten im Feld angekommen sind. Diese Unklarheit erschwert es, bestimmte Logik wie Layoutanpassungen genau dann auszulösen, wenn ein Formular automatisch ausgefüllt wird. Das neue autofill-Ereignis ist jetzt als Chrome-Ursprungstest verfügbar.
Ab Chrome 147 wird ein nützliches Signal für Entwickler bereitgestellt, wenn der Browser den Nutzer beim automatischen Ausfüllen unterstützt.
autofill: Lösung für das, was input und change nicht gelöst haben
Die Ereignisse input und change sind generische Signale, die nicht unterscheiden, ob ein Nutzer ein Formularfeld manuell ausfüllt oder die Autofill-Funktion verwendet wird.
Da es kein spezielles Ereignis für das automatische Ausfüllen von Formularen gibt, ist es für Entwickler schwieriger, zuverlässige UI-Updates durchzuführen, die beim Ausfüllen von Formularen hilfreich sind. Ein Nutzer gibt beispielsweise sein Wohnsitzland an und in einem Feld in der Nähe wird der Bundesstaat oder Bezirk angegeben, in dem er wohnt. Das variiert je nach Land. Wenn dieses Update als Reaktion auf eine Autofill-Anfrage ausgelöst wird, ist das für Entwickler besser vorhersehbar und für Nutzer nützlicher. Das autofill-Ereignis löst dieses Problem.
Das autofill-Ereignis wird kurz vor dem automatischen Ausfüllen eines Formulars durch den Browser ausgeführt. Der Listener für das Ereignis empfängt ein Array von autofillValues, das ausgefüllt werden muss, und eine refill-Funktion. Der Listener kann die Funktion refill aufrufen, um anzufordern, dass der Browser das Formular neu ausfüllt, wenn der Listener beispielsweise den Inhalt geändert hat. Hier ein Beispiel für das Markup eines Formulars:
<form>
<div>
<label for="country">Country</label>
<select id="country" name="country" autocomplete="country">
<!-- ... -->
</select>
</div>
<div>
<label for="address-line-1">Address Line 1</label>
<input type="text" name="address-line-1" id="address-line-1" autocomplete="address-line1">
</div>
<div>
<label for="city">City</label>
<input type="text" name="city" id="city" autocomplete="address-level2">
</div>
<div>
<div class="state">
<!-- This section gets populated based on the
value provided in the country field -->
</div>
</div>
<div>
<input type="submit" value="Calculate">
</div>
</form>
Mit diesem JavaScript wird das autofill-Ereignis an das document gebunden:
document.addEventListener('autofill', async event => {
// A null check here is a good idea, as
// refills are not available in a WebView.
if (event.refill == null) {
/* Apply legacy logic */
return;
}
// Walk the fields
for (const {field, value} of event.autofillValues) {
if (field.name === 'country') {
if (value === 'Germany') {
document.querySelector('.state').innerHTML = `
<label for="state">State:</label>
<select name="state" id="state" autocomplete="address-level1">
<option selected="selected"></option>
<option value="BW">Baden-Württemberg</option>
<option value="BY">Bavaria</option>
<!-- Other states omitted -->
</select>
`;
} else {
/* Logic for other countries */
}
}
}
await event.refill();
});
Dieses Beispiel zeigt ein typisches Adressformular. Der Nutzer kann in ein Formularfeld klicken oder darauf tippen, um ein AutoFill-Tooltip aufzurufen. Wenn eine Adresse für das automatische Ausfüllen ausgewählt wird, geschieht Folgendes:
- Der
autofill-Event-Handler wird kurz vor dem automatischen Ausfüllen des Formularfelds ausgeführt. event.autofillValuesstellt die vorgeschlagenen Autofill-Daten in einem Objekt mit zwei Eigenschaften bereit:field: Eine Referenz auf das DOM-Element, das automatisch ausgefüllt werden soll.value: Der vorgeschlagene Autofill-Wert für das Feld.
- Wenn der Feldname für das Land erkannt wird, wird das Land (in diesem Beispiel Deutschland) ermittelt und die Drop-down-Liste für den Bundesstaat mit den entsprechenden Optionen für das Land gefüllt.
event.refill()wird aufgerufen, um den Browser anzuweisen, das Formular neu auszufüllen. Dadurch wird die Autofill-Aktion für das geänderte Formular wiederholt.
Wenn Sie sich für komplexere autofill-Anwendungsfälle interessieren, hat Yoav Weiss von Shopify zwei Demos erstellt:
- Ein Formular für personenbezogene Daten, das dem Beispiel in diesem Beitrag ähnelt, aber über eine einfache Demonstration des
autofill-Ereignisses hinausgeht. - Eine Autofill-Demo für Kreditkarten, in der das
autofill-Ereignis verwendet wird, um den Kartenaussteller zu erkennen und das DOM mit ansprechenden Grafiken zu aktualisieren.
Die Demo für das automatische Ausfüllen von Kreditkartendaten veranschaulicht die Funktionen des autofill-Ereignisses. Diese Arten von Aktionen waren auch vor dem autofill-Ereignis möglich, aber ein eigenes Ereignis für das automatische Ausfüllen von Formularen bietet Entwicklern eine bessere Erfahrung.
Das autofill-Ereignis und die CSS-Pseudoklasse :autofill
Die :autofill-Pseudoklasse für CSS entspricht automatisch ausgefüllten Formularelementen und das autofill-Ereignis kann eine Ergänzung dazu sein.
So können Sie beispielsweise mit :autofill Felder unterscheiden, die gerade automatisch ausgefüllt wurden, von Feldern, die während des autofill-Ereignisses geändert wurden. Das kann für den Nutzer ein nützliches Signal sein, dass das Feld vorausgefüllt wurde. Die Tatsache, dass die Daten in einem bearbeitbaren Formularfeld vorhanden sind, zeigt dem Nutzer jedoch, dass er sie bei Bedarf ändern kann.
document.addEventListener('autofill', async event => {
if (event.refill !== null) {
// Walk the fields to be autofilled:
for (const {field, value} of event.autofillValues) {
let cardIssuer;
// If this field is the credit card number,
// use its value to get the card issuer.
if (field.name === 'card-number') {
cardIssuer = getCardIssuerFromNumber(value);
}
// Populate the card issuer field with
// the data we got from the card number
if (field.name === 'card-issuer') {
field.value = cardIssuer;
field.classList.add('modified-by-event');
}
}
}
});
Im vorherigen Codeblock werden die automatisch ausgefüllten Felder durchlaufen, bis das Feld für die Kreditkartennummer gefunden wird. Die Daten im Feld werden verwendet, um den Aussteller der Karte zu ermitteln. Dieser wird in das Feld eingetragen und erhält die Klasse .modified-by-event. Das Autofill-Styling für dieses Feld kann dann so angepasst werden, dass es sich von anderen automatisch ausgefüllten Feldern unterscheidet, die nicht durch das autofill-Ereignis geändert wurden:
/* Standard autofill style: */
input:autofill {
border: 0.25rem solid #cc0;
}
/* Autofill style for `autofill` event-modified data: */
input.modified-by-event-autofill:autofill {
border-color: #0cc;
}
So können Sie die Formatierungssemantik für automatisch ausgefüllte Formularfelder beibehalten, :autofill-Stile übernehmen und dem Nutzer trotzdem auf aussagekräftige Weise anzeigen, dass das Formularfeld automatisch ausgefüllt wurde.
Das autofill-Ereignis und die CSS-Eigenschaft field-sizing
Wenn die CSS-Eigenschaft field-sizing den Wert content hat, werden Felder wie das <textarea>-Element automatisch an ihren Inhalt angepasst. So werden unhandliche Scrollbalken in kleinen Feldern vermieden:
textarea {
/* The field grows to fit the content automatically: */
field-sizing: content;
min-height: 3lh;
transition: min-height 0.2s ease-out;
}
Das ist zwar nutzerfreundlich, kann aber Layout Shifts verursachen. Während der Nutzer tippt, wird das Eingabefeld nach und nach erweitert. Wenn ein Browser jedoch eine mehrzeilige Adresse automatisch in ein <textarea>-Element einfügt, kann sich das Feld in einem Augenblick erheblich vergrößern. Mit dem autofill-Ereignis können Sie diese Übergänge effektiver verwalten, indem Sie beispielsweise den Container animieren oder seine Scrollposition anpassen, damit der Nutzer den Kontext nicht verliert.
document.addEventListener('autofill', event => {
// Assumes a single field for the purpose of a quick
// demonstration, such as a multiline address field:
const [addressDetails] = event.autofillValues;
// Since field-sizing: content causes an immediate jump,
// we can use the event to ensure the UI remains stable:
requestAnimationFrame(() => {
addressDetails.scrollIntoView({behavior: 'smooth', block: 'nearest'});
});
if (event.refill !== null) {
await event.refill();
}
});
Die Anforderungen jeder Anwendung sind unterschiedlich. Sie müssen also selbst entscheiden, ob sich dieses Muster für Sie eignet. Es zeigt jedoch, was mit einer Kombination aus CSS und dem autofill-Ereignis möglich ist.
Automatisches Ausfüllen von Formularen erkennen und messen
Analysedaten zu Autofill-Vorgängen in Formularen sind für Unternehmen wertvoll, aber Autofill-Vorgänge in Formularen zu erfassen ist mit den vorhandenen Webfunktionen schwierig. Beispielsweise wird die CSS-Pseudoklasse :autofill verwendet, die nicht Baseline ist.
Das autofill-Ereignis ist ein Tool zum Erkennen von Autofill-Vorgängen in Formularen. Da das Ereignis nur bei einem tatsächlichen Versuch zum automatischen Ausfüllen und nicht bei einer Eingabe ausgelöst wird und die Property event.autofillValues nur die automatisch ausgefüllten Felder enthält, können Sie automatisch ausgefüllte Daten so erfassen:
document.addEventListener('autofill', event => {
// Get autofilled data
const autofillData = {
// Assumes the form has an ID for simplicity:
form: event.target.id,
autofilled: true
};
// Send to analytics endpoint
const body = JSON.stringify(autofillData);
navigator.sendBeacon('/analytics', body);
});
Dieses Beispiel ist vereinfacht, zeigt aber, wie viel einfacher es ist, diese Informationen zu erfassen. Sie können Analysedaten für das automatische Ausfüllen so strukturieren und erfassen, dass sie Ihren Anforderungen entsprechen. Umständliche und unzuverlässige Workarounds sind nicht erforderlich.
Für den Ursprungstest registrieren
Das autofill-Ereignis ist Teil eines Chrome-Ursprungstests. Ihre Teilnahme kann dazu beitragen, Chrome zu verbessern. Mit Origin Trials können Sie experimentelle Funktionen mit echten Nutzern testen und dem Chrome-Team Feedback geben, bevor die API Teil der Webplattform wird.
Wenn Sie das autofill-Ereignis auf Ihrer Website verwenden möchten, registrieren Sie sich hier für den Origin-Testlauf. Chrome freut sich darauf, zu sehen, wie Sie die Funktion nutzen und wie wir sie dadurch verbessern können.