L'evento di compilazione automatica è in prova dell'origine

Jeremy Wagner

Pubblicato: 10 giugno 2026

I moduli sono un punto di interazione frequente sul web, ma sono responsabili di una discreta quantità di attrito per gli utenti. I browser offrono da tempo funzionalità di compilazione automatica per ridurre questo attrito, evitando agli utenti attività ripetitive come l'inserimento di numeri di carte di credito, indirizzi e credenziali di accesso.

Per gli sviluppatori, la gestione del completamento automatico dei moduli è una sfida. Sebbene gli sviluppatori possano ascoltare gli eventi input o change sugli elementi <form>, questi eventi non indicano come sono arrivati i dati nel campo. Questa mancanza di chiarezza rende difficile attivare una logica specifica, come gli aggiustamenti del layout, nel momento esatto in cui un modulo viene compilato automaticamente. Il nuovo evento autofill, ora disponibile come prova dell'origine di Chrome

a partire da Chrome 147, fornisce un segnale utile per gli sviluppatori quando il browser aiuta l'utente con la compilazione automatica.

autofill: risoluzione di ciò che input e change non hanno risolto

Gli eventi input e change sono indicatori generici che non distinguono tra il caso in cui l'utente compila manualmente un campo del modulo e quello in cui viene utilizzata la compilazione automatica. La mancanza di un evento dedicato per la compilazione automatica dei moduli rende più difficile per gli sviluppatori eseguire in modo affidabile aggiornamenti dell'interfaccia utente utili per la compilazione dei moduli. Ad esempio, un utente specifica il proprio paese di residenza e viene visualizzato un campo nelle vicinanze per specificare lo stato o il distretto in cui vive, che varia in base al paese. L'attivazione di questo aggiornamento in risposta a una richiesta di compilazione automatica è più prevedibile per gli sviluppatori e utile per gli utenti. L'evento autofill risolve questo problema.

L'evento autofill viene eseguito appena prima che il browser compili automaticamente un modulo. Il listener per l'evento riceve un array di autofillValues da compilare e una funzione refill. Il listener può chiamare la funzione refill per richiedere al browser di compilare nuovamente il modulo se, ad esempio, il listener ha modificato il contenuto. Considera questo markup del modulo di esempio:

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

Questo codice JavaScript associa l'evento autofill a 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();
});

Questo esempio è un tipico modulo di indirizzo. L'utente può fare clic o toccare un campo del modulo per attivare un suggerimento per il completamento automatico. Quando viene selezionato un indirizzo di compilazione automatica, si verifica quanto segue:

  1. Il gestore eventi autofill viene eseguito prima del riempimento automatico del campo del modulo.
  2. event.autofillValues fornisce i dati di compilazione automatica proposti in un oggetto con due proprietà:
    • field: un riferimento all'elemento DOM da compilare automaticamente.
    • value: Il valore di compilazione automatica proposto per il campo.
  3. Quando viene rilevato il nome del campo paese, la logica rileva il paese, la Germania in questo esempio, e compila il menu a discesa dello stato con le scelte appropriate per il paese.
  4. event.refill() viene chiamato per indicare al browser di compilare nuovamente il modulo, il che ripete l'azione di compilazione automatica sul modulo modificato.

Se ti interessano casi d'uso più complessi di autofill, Yoav Weiss di Shopify ha creato due demo:

  1. Un modulo per le informazioni personali simile all'esempio riportato in questo post, ma che va oltre una semplice dimostrazione dell'evento autofill.
  2. Una demo della compilazione automatica della carta di credito che utilizza l'evento autofill per rilevare l'emittente della carta e aggiornare il DOM in modo sostanziale con immagini avanzate.

La demo della compilazione automatica della carta di credito illustra le funzionalità dell'evento autofill. Sebbene questi tipi di esperienze fossero possibili prima dell'evento autofill, avere un evento dedicato al completamento automatico dei moduli offre una migliore esperienza per gli sviluppatori.

L'evento autofill e la pseudo-classe CSS :autofill

La pseudo-classe CSS :autofill corrisponde agli elementi del modulo compilati automaticamente e l'evento autofill può essere un complemento.

Ad esempio, potresti voler utilizzare :autofill per distinguere i campi compilati automaticamente da quelli modificati durante l'evento autofill. Questo potrebbe essere un segnale utile per l'utente che indica che il campo è stato precompilato, ma l'esistenza dei dati in un controllo modulo modificabile indica all'utente che può comunque modificarli se necessario.

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

Nel blocco di codice precedente, i campi compilati automaticamente vengono esaminati fino a quando non viene trovato il campo del numero carta. I dati nel campo vengono utilizzati per ottenere l'emittente della carta, che viene inserita nel campo e a cui viene assegnata una classe di .modified-by-event. Lo stile della compilazione automatica per questo campo può essere modificato in modo che si distingua dagli altri campi compilati automaticamente non modificati dall'evento autofill:

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

In questo modo, puoi conservare la semantica dello stile per i campi del modulo compilati automaticamente, ereditare gli stili :autofill e fornire comunque una presentazione significativa all'utente che il campo del modulo è stato compilato automaticamente in modo distinto.

L'evento autofill e la proprietà CSS field-sizing

Se la proprietà CSS field-sizing ha un valore di content, i campi come l'elemento <textarea> vengono ridimensionati automaticamente per adattarsi ai contenuti. In questo modo non sono più necessarie barre di scorrimento scomode nei campi piccoli:

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

È un aspetto importante per l'esperienza utente, ma può causare variazioni del layout. Man mano che l'utente digita, l'espansione del campo di immissione è graduale. Tuttavia, quando un browser compila automaticamente un indirizzo multilinea in un elemento <textarea>, il campo potrebbe espandersi notevolmente in un istante. Con l'evento autofill, puoi gestire queste transizioni in modo più efficace, ad esempio animando il contenitore o regolando la sua posizione di scorrimento per evitare che l'utente perda il contesto.

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

I requisiti di ogni applicazione sono diversi, quindi devi capire se questo è un pattern che vale la pena utilizzare, ma questo è un esempio di ciò che è possibile ottenere utilizzando una combinazione di CSS e dell'evento autofill.

Rilevare e misurare i riempimenti automatici dei moduli

I dati di analisi dei riempimenti automatici dei moduli sono preziosi per le attività, ma misurare i riempimenti automatici sui moduli è difficile con le funzionalità web esistenti. Ad esempio, la prassi è quella di fare affidamento sulla pseudo-classe CSS :autofill, che non è Baseline.

L'evento autofill è uno strumento per rilevare la compilazione automatica dei moduli. Poiché l'evento viene attivato solo in caso di tentativo effettivo di compilazione automatica e non in caso di input, e la proprietà event.autofillValues contiene solo i campi compilati automaticamente, puoi monitorare i dati compilati automaticamente:

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

Questo esempio è semplificato, ma mostra quanto sia più semplice acquisire queste informazioni. Puoi strutturare e raccogliere i dati di analisi del completamento automatico in modo da funzionare per te, senza soluzioni alternative difficili da implementare e inaffidabili.

Registrati per la prova dell'origine

L'evento autofill è in una prova dell'origine di Chrome e la tua partecipazione può aiutare Chrome a migliorarlo. Le prove dell'origine ti consentono di testare funzionalità sperimentali con utenti reali e fornire feedback al team di Chrome prima che l'API diventi parte della piattaforma web.

Per iniziare a utilizzare l'evento autofill sul tuo sito, registrati alla prova dell'origine qui. Chrome non vede l'ora di scoprire come lo utilizzi e come questo può aiutarci a trovare opportunità di miglioramento.