Deze pagina is vertaald door de Cloud Translation API.

De autofill-gebeurtenis bevindt zich in de oorspronkelijke proefversie.

Jeremy Wagner

Gepubliceerd: 10 juni 2026

Formulieren zijn een veelvoorkomend interactiepunt op het web, maar ze zorgen ook voor de nodige wrijving voor gebruikers. Browsers bieden al lange tijd autofill-functionaliteit om deze wrijving te verminderen en gebruikers te behoeden voor repetitieve taken zoals het invoeren van creditcardnummers, adressen en inloggegevens.

Voor ontwikkelaars is het afhandelen van automatisch ingevulde formulieren een uitdaging. Hoewel ontwikkelaars kunnen luisteren naar input of change events op <form> -elementen, geven deze events geen informatie over hoe de data in het veld terecht is gekomen. Dit gebrek aan duidelijkheid maakt het lastig om specifieke logica – zoals lay-outaanpassingen – te activeren op het exacte moment dat een formulier automatisch wordt ingevuld. Het nieuwe autofill event – nu beschikbaar als proefversie van Chrome Origin – biedt een oplossing.

Vanaf Chrome versie 147 biedt deze functie een nuttig signaal aan ontwikkelaars wanneer de browser de gebruiker helpt met automatisch aanvullen.

`autofill` : een oplossing voor problemen die zich voordoen `input` en `change` gegevens.

De input en change events zijn generieke signalen die geen onderscheid maken tussen het handmatig invullen van een formulierveld door de gebruiker en het gebruik van autofill. Het ontbreken van een specifiek event voor autofill maakt het voor ontwikkelaars lastiger om betrouwbaar UI-updates uit te voeren die nuttig zijn bij het invullen van formulieren. Een gebruiker geeft bijvoorbeeld zijn of haar land van verblijf op, waarna een veld in de buurt verschijnt met de provincie of het district waarin de gebruiker woont, wat per land verschilt. Het activeren van deze update als reactie op een autofill-verzoek is voorspelbaarder voor ontwikkelaars en nuttiger voor gebruikers. Het autofill event lost dit probleem op.

De autofill gebeurtenis wordt uitgevoerd vlak voordat de browser een formulier automatisch invult. De listener voor de gebeurtenis ontvangt een array met autofillValues die moeten worden ingevuld en een refill functie. De listener kan de refill functie aanroepen om de browser te vragen het formulier opnieuw in te vullen als de listener bijvoorbeeld de inhoud heeft gewijzigd. Neem bijvoorbeeld deze formulieropmaak:

<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>

Deze JavaScript-code koppelt de autofill gebeurtenis aan het document :

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();
});

Dit voorbeeld is een typisch adresformulier. De gebruiker kan in een formulierveld klikken of tikken om een tooltip voor automatisch invullen te activeren. Wanneer een adres voor automatisch invullen wordt geselecteerd, gebeurt het volgende:

De autofill -gebeurtenishandler wordt uitgevoerd vlak voordat het formulierveld automatisch wordt ingevuld.
event.autofillValues levert de voorgestelde autofill-gegevens in een object met twee eigenschappen:
- field : Een verwijzing naar het DOM-element dat automatisch moet worden ingevuld.
- value : De voorgestelde waarde voor automatisch invullen van het veld.
Wanneer de landnaam wordt gedetecteerd, herkent de logica het land – in dit voorbeeld Duitsland – en vult de keuzelijst voor de deelstaat met de juiste opties voor dat land.
event.refill() wordt aangeroepen om de browser opdracht te geven het formulier opnieuw in te vullen, waardoor de autofill-actie op het gewijzigde formulier wordt herhaald.

Als je geïnteresseerd bent in meer geavanceerde toepassingen autofill , heeft Yoav Weiss van Shopify twee demo's gemaakt:

Een formulier met persoonlijke gegevens dat lijkt op het voorbeeld in dit bericht, maar verder gaat dan een eenvoudige demonstratie van de autofill functie.
Een demonstratie van automatisch invullen van creditcardgegevens , waarbij de autofill gebeurtenis wordt gebruikt om de kaartuitgever te detecteren en de DOM aanzienlijk bij te werken met rijke visuele elementen.

De demo voor het automatisch invullen van creditcardgegevens illustreert de mogelijkheden van de autofill gebeurtenis. Hoewel dit soort functionaliteiten al mogelijk waren vóór de autofill gebeurtenis, zorgt een aparte gebeurtenis voor het automatisch invullen van formulieren voor een betere ontwikkelaarservaring.

Het `autofill` -evenement en de CSS-pseudoklasse `:autofill`

De CSS-pseudoklasse :autofill komt overeen met automatisch ingevulde formulierelementen, en de autofill gebeurtenis kan daar een aanvulling op zijn.

Je kunt bijvoorbeeld :autofill gebruiken om velden die automatisch zijn ingevuld te onderscheiden van velden die tijdens het autofill invullen zijn gewijzigd. Dit kan een nuttig signaal zijn voor de gebruiker dat het veld al is ingevuld, maar dat de gegevens in een bewerkbaar formulierveld staan, zodat de gebruiker ze indien nodig nog kan wijzigen.

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');
      }
    }
  }
});

In het vorige codeblok worden de automatisch ingevulde velden doorlopen totdat het veld voor het creditcardnummer wordt gevonden. De gegevens in dit veld worden gebruikt om de uitgever van de kaart te achterhalen. Deze wordt vervolgens in het veld geplaatst en voorzien van de klasse ` .modified-by-event . De opmaak van de automatische invulling voor dit veld kan vervolgens worden aangepast, zodat deze zich onderscheidt van andere automatisch ingevulde velden die niet door de autofill invullingsgebeurtenis worden gewijzigd.

/* 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;
}

Hiermee kunt u de stijlkenmerken van automatisch ingevulde formuliervelden behouden, de :autofill stijlen overnemen en de gebruiker toch op een duidelijke manier laten zien dat het formulierveld automatisch is ingevuld.

De `autofill` gebeurtenis en de CSS-eigenschap `field-sizing`

Als de CSS-eigenschap ` field-sizing de waarde ` content heeft, passen velden zoals het <textarea> `-element zich automatisch aan de inhoud aan. Dit maakt onhandige scrollbalken in kleine velden overbodig.

textarea {
  /* The field grows to fit the content automatically: */
  field-sizing: content;
  min-height: 3lh;
  transition: min-height 0.2s ease-out;
}

Het is een goede overweging voor de gebruikerservaring, maar het kan lay-outverschuivingen veroorzaken. Terwijl een gebruiker typt, wordt het invoerveld geleidelijk groter. Wanneer een browser echter een adres met meerdere regels automatisch invult in een <textarea> -element, kan het veld in een oogwenk aanzienlijk groter worden. Met de autofill gebeurtenis kunt u deze overgangen effectiever beheren, bijvoorbeeld door de container te animeren of de scrollpositie aan te passen, zodat de gebruiker de context niet verliest.

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();
  }
});

De eisen van elke applicatie zijn anders, dus je moet zelf bepalen of dit een bruikbaar patroon is. Dit illustreert echter wel wat er mogelijk is met een combinatie van CSS en de autofill gebeurtenis.

Automatische formulierinvulling detecteren en meten

Analytische gegevens over automatisch ingevulde formulieren zijn waardevol voor bedrijven, maar het meten van dit gebruik is lastig met de bestaande webfunctionaliteiten. Zo wordt er bijvoorbeeld vaak gebruikgemaakt van de CSS-pseudoklasse ` :autofill , die niet standaard wordt ondersteund.

De autofill gebeurtenis is een hulpmiddel om automatisch invullen van formulieren te detecteren. Omdat de gebeurtenis alleen wordt geactiveerd bij een daadwerkelijke poging tot automatisch invullen en niet bij elke invoer, en de eigenschap event.autofillValues alleen de velden bevat die automatisch zijn ingevuld, kunt u automatisch ingevulde gegevens volgen:

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);
});

Dit voorbeeld is vereenvoudigd, maar het laat zien hoe veel eenvoudiger het is om deze informatie vast te leggen. U kunt analysedata voor automatisch invullen structureren en verzamelen op een manier die voor u werkt, zonder omslachtige en onbetrouwbare oplossingen.

Meld je aan voor de Origin-proef.

De autofill functie bevindt zich in een Chrome Origin-testfase en uw deelname kan Chrome helpen deze te verbeteren. Origin-tests stellen u in staat experimentele functies te testen met echte gebruikers en feedback te geven aan het Chrome-team voordat de API onderdeel wordt van het webplatform.

Om de autofill functie op uw site te gaan gebruiken, kunt u zich hier registreren voor de Origin-proefversie . Chrome is benieuwd hoe u deze functie gebruikt en hoe dit ons kan helpen bij het vinden van verbeterpunten.

De autofill-gebeurtenis bevindt zich in de oorspronkelijke proefversie. Stay organized with collections Save and categorize content based on your preferences.

autofill : een oplossing voor problemen die zich voordoen input en change gegevens.

Het autofill -evenement en de CSS-pseudoklasse :autofill

De autofill gebeurtenis en de CSS-eigenschap field-sizing