L'événement de saisie automatique est en période d'essai.

Jeremy Wagner

Publié le 10 juin 2026

Les formulaires sont un point d'interaction fréquent sur le Web, mais ils sont responsables d'une certaine friction pour les utilisateurs. Les navigateurs proposent depuis longtemps des fonctionnalités de saisie automatique pour réduire cette friction, ce qui évite aux utilisateurs d'effectuer des tâches répétitives telles que la saisie de numéros de carte de crédit, d'adresses et d'identifiants de connexion.

Pour les développeurs, la gestion de la saisie automatique des formulaires est un défi. Bien que les développeurs puissent écouter les événements input ou change sur les éléments <form>, ces événements ne vous indiquent pas comment les données sont arrivées dans le champ. Ce manque de clarté rend difficile le déclenchement d'une logique spécifique, telle que des ajustements de mise en page, au moment précis où un formulaire est rempli automatiquement. Le nouvel autofill événement, désormais disponible en tant qu'essai d'origine Chrome

à partir de Chrome 147, fournit un signal utile aux développeurs lorsque le navigateur aide l'utilisateur à remplir automatiquement un formulaire.

autofill : résoudre ce que input et change n'ont pas fait

Les événements input et change sont des signaux génériques qui ne font pas la différence entre un utilisateur qui remplit manuellement un champ de formulaire et un utilisateur qui utilise la saisie automatique. L'absence d'événement dédié au remplissage automatique des formulaires rend plus difficile pour les développeurs d'effectuer de manière fiable des mises à jour de l'interface utilisateur utiles lors du remplissage de formulaires. Par exemple, un utilisateur spécifie son pays de résidence, et un champ à proximité s'affiche pour indiquer l'État ou le district dans lequel il réside, qui varie selon le pays. Le déclenchement de cette mise à jour en réponse à une demande de saisie automatique est plus prévisible pour les développeurs et utile pour les utilisateurs. L'événement autofill résout ce problème.

L'événement autofill s'exécute juste avant que le navigateur ne remplisse automatiquement un formulaire. L'écouteur de l'événement reçoit un tableau de autofillValues à remplir et une fonction refill. L'écouteur peut appeler la fonction refill pour demander au navigateur de remplir à nouveau le formulaire si, par exemple, l'écouteur a modifié le contenu. Prenons l'exemple suivant de balisage de formulaire :

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

Ce code JavaScript lie l'événement autofill au 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();
});

Cet exemple est un formulaire d'adresse typique. L'utilisateur peut cliquer ou appuyer sur un champ de formulaire pour déclencher une info-bulle de saisie automatique. Lorsqu'une adresse de saisie automatique est sélectionnée, les événements suivants se produisent :

  1. Le gestionnaire d'événements autofill s'exécute juste avant que le champ de formulaire ne soit rempli automatiquement.
  2. event.autofillValues fournit les données de saisie automatique proposées dans un objet comportant deux propriétés :
    • field : référence à l'élément DOM à remplir automatiquement.
    • value : valeur de saisie automatique proposée pour le champ.
  3. Lorsque le nom du champ de pays est détecté, la logique détecte le pays (l'Allemagne dans cet exemple) et remplit la liste déroulante de l'État avec les choix appropriés pour le pays.
  4. event.refill() est appelé pour demander au navigateur de remplir à nouveau le formulaire, ce qui répète l'action de saisie automatique sur le formulaire modifié.

Si vous êtes intéressé par des cas d'utilisation plus complexes de autofill, Yoav Weiss de Shopify a créé deux démos :

  1. Un formulaire d'informations personnelles semblable à l'exemple de cet article, mais qui va au-delà d'une démonstration de base de l'événement autofill.
  2. Une démo de saisie automatique de carte de crédit qui utilise l'événement autofill pour détecter l'émetteur de la carte et mettre à jour le DOM considérablement avec des éléments visuels riches.

La démo de saisie automatique de carte de crédit illustre les fonctionnalités de l'événement autofill. Bien que ces types d'expériences aient été possibles avant l'événement autofill, le fait d'avoir un événement dédié au remplissage automatique des formulaires améliore l'expérience des développeurs.

L'événement autofill et la pseudo-classe CSS :autofill

La pseudo-classe CSS :autofill correspond aux éléments de formulaire remplis automatiquement, et l'événement autofill peut la compléter .

Par exemple, vous pouvez utiliser :autofill pour différencier les champs qui viennent d'être remplis automatiquement de ceux qui ont été modifiés lors de l'événement autofill. Cela peut être un signal utile pour l'utilisateur indiquant que le champ a été prérempli, mais l'existence des données dans un contrôle de formulaire modifiable indique à l'utilisateur qu'il peut toujours les modifier si nécessaire.

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

Dans le bloc de code précédent, les champs remplis automatiquement sont parcourus jusqu'à ce que le champ du numéro de carte de crédit soit trouvé. Les données du champ sont utilisées pour obtenir l'émetteur de la carte, qui est renseigné dans le champ et reçoit une classe .modified-by-event. Le style de saisie automatique de ce champ peut ensuite être ajusté pour être distinct des autres champs remplis automatiquement qui ne sont pas modifiés par l'événement 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;
}

Vous pouvez ainsi conserver la sémantique de style pour les champs de formulaire remplis automatiquement, hériter des styles :autofill et toujours fournir à l'utilisateur une présentation significative indiquant que le champ de formulaire a été rempli automatiquement d'une manière distincte.

L'événement autofill et la propriété CSS field-sizing

Si la propriété CSS field-sizing a la valeur content, les champs tels que l'élément <textarea> sont automatiquement redimensionnés pour s'adapter à leur contenu. Cela élimine le besoin de barres de défilement maladroites dans les petits champs :

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

Il s'agit d'une bonne considération pour l'expérience utilisateur, mais cela peut entraîner des changements de mise en page. Lorsqu'un utilisateur saisit du texte, l'expansion du champ de saisie est progressive. Toutefois, lorsqu'un navigateur remplit automatiquement une adresse multiligne dans un élément <textarea>, le champ peut s'étendre considérablement en un instant. Avec l'événement autofill, vous pouvez gérer ces transitions plus efficacement, par exemple en animant le conteneur ou en ajustant sa position de défilement pour éviter que l'utilisateur ne perde le contexte.

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

Les exigences de chaque application sont différentes. Vous devez donc déterminer s'il s'agit d'un modèle à utiliser. Toutefois, cela illustre ce qu'il est possible de réaliser en combinant CSS et l'événement autofill.

Détecter et mesurer les saisies automatiques de formulaires

Les données d'analyse des saisies automatiques de formulaires sont précieuses pour les entreprises, mais mesurer les saisies automatiques dans les formulaires est difficile avec les fonctionnalités Web existantes. Par exemple, la pratique consiste à s'appuyer sur la pseudo-classe CSS :autofill, qui n'est pas de base.

L'événement autofill est un outil permettant de détecter les saisies automatiques de formulaires. Étant donné que l'événement ne se déclenche que lors d'une tentative de saisie automatique réelle et non lors d'une saisie, et que la propriété event.autofillValues ne contient que les champs qui ont été remplis automatiquement, vous pouvez suivre les données remplies automatiquement :

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

Cet exemple est simplifié, mais il montre à quel point il est plus simple de capturer ces informations. Vous pouvez structurer et collecter les données d'analyse de saisie automatique de la manière qui vous convient, sans solutions de contournement difficiles à implémenter et peu fiables.

S'inscrire à l'essai d'origine

L'événement autofill fait partie d'un essai Origin Trial Chrome, et votre participation peut aider Chrome à l'améliorer. Les essais d'origine vous permettent de tester des fonctionnalités expérimentales auprès de vrais utilisateurs et de fournir des commentaires à l' équipe Chrome avant que l'API ne fasse partie de la plate-forme Web.

Pour commencer à utiliser l'événement autofill sur votre site, inscrivez-vous à l' essai d'origine ici. Chrome a hâte de voir comment vous l'utiliserez et comment cela peut nous aider à trouver des opportunités d'amélioration.