Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

O evento de preenchimento automático está em teste de origem

Jeremy Wagner

Publicado em: 10 de junho de 2026

Os formulários são um ponto de interação frequente na Web, mas são responsáveis por uma quantidade razoável de atrito para os usuários. Os navegadores oferecem recursos de preenchimento automático há muito tempo para reduzir esse atrito, poupando os usuários de tarefas repetitivas, como inserir números de cartão de crédito, endereços e credenciais de login.

Para os desenvolvedores, lidar com o preenchimento automático de formulários é um desafio. Embora os desenvolvedores possam detectar eventos input ou change em elementos <form>, esses eventos não informam como os dados chegaram ao campo. Essa falta de clareza dificulta o acionamento de uma lógica específica, como ajustes de layout, no momento exato em que um formulário é preenchido automaticamente. O novo evento autofill, agora disponível como um teste de origem do Chrome

a partir do Chrome 147, fornece um sinal útil para os desenvolvedores quando o navegador ajuda o usuário com o preenchimento automático.

`autofill`: resolvendo o que `input` e `change` não resolveram

Os eventos input e change são indicadores genéricos que não diferenciam quando o usuário preenche manualmente um campo de formulário e quando o preenchimento automático é usado. A falta de um evento dedicado para o preenchimento automático de formulários dificulta que desenvolvedores realizem atualizações de interface confiáveis que são úteis ao preencher formulários. Por exemplo, um usuário especifica o país de residência, e um campo próximo aparece para especificar o estado ou distrito em que ele mora, que varia de acordo com o país. Acionar essa atualização em resposta a uma solicitação de preenchimento automático é mais previsível para desenvolvedores e útil para usuários. O evento autofill resolve esse problema.

O evento autofill é executado pouco antes de o navegador preencher automaticamente um formulário. O listener do evento recebe uma matriz de autofillValues a ser preenchida e uma função refill. O listener pode chamar a função refill para solicitar que o navegador preencha novamente o formulário se, por exemplo, o listener tiver mudado o conteúdo. Confira este exemplo de marcação de formulário:

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

Esse JavaScript vincula o evento autofill no 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();
});

Este exemplo é um formulário de endereço típico. O usuário pode clicar ou tocar em um campo de formulário para acionar uma dica de preenchimento automático. Quando um endereço de preenchimento automático é selecionado, acontece o seguinte:

O manipulador de eventos autofill é executado antes do preenchimento automático do campo de formulário.
event.autofillValues fornece os dados de preenchimento automático propostos em um objeto com duas propriedades:
- field: uma referência ao elemento DOM que será preenchido automaticamente.
- value: o valor de preenchimento automático proposto para o campo.
Quando o nome do campo de país é detectado, a lógica detecta o país (Alemanha, neste exemplo) e preenche o menu suspenso de estado com as opções adequadas para o país.
event.refill() é chamado para instruir o navegador a preencher o formulário novamente, o que repete a ação de preenchimento automático no formulário alterado.

Se você tiver interesse em casos de uso mais complexos do autofill, Yoav Weiss da Shopify criou duas demonstrações:

Um formulário de informações pessoais semelhante ao exemplo desta postagem, mas que vai além de uma demonstração básica do evento autofill.
Uma demonstração de preenchimento automático de cartão de crédito que usa o evento autofill para detectar o emissor do cartão e atualizar o DOM de maneira substancial com recursos visuais avançados.

A demonstração de preenchimento automático de cartão de crédito ilustra os recursos do evento autofill. Embora esses tipos de experiências fossem possíveis antes do evento autofill, ter um evento dedicado ao preenchimento automático de formulários proporciona uma experiência melhor para os desenvolvedores.

O evento `autofill` e a pseudoclasse CSS `:autofill`

A pseudoclasse :autofill CSS corresponde a elementos de formulário preenchidos automaticamente, e o evento autofill pode ser um complemento a ela.

Por exemplo, talvez você queira usar :autofill para diferenciar campos que foram preenchidos automaticamente daqueles que foram modificados durante o evento autofill. Isso pode ser um sinal útil para o usuário de que o campo foi preenchido previamente, mas a existência dos dados em um controle de formulário editável informa ao usuário que ele ainda pode mudar se precisar.

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

No bloco de código anterior, os campos preenchidos automaticamente são percorridos até que o campo de número do cartão de crédito seja encontrado. Os dados no campo são usados para receber o emissor do cartão, que é preenchido no campo e recebe uma classe de .modified-by-event. O estilo de preenchimento automático desse campo pode ser ajustado para ser diferente de outros campos preenchidos automaticamente que não foram modificados pelo 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;
}

Assim, você pode preservar a semântica de estilo para campos de formulário preenchidos automaticamente, herdar estilos :autofill e ainda oferecer uma apresentação significativa ao usuário de que o campo de formulário foi preenchido automaticamente de uma maneira distinta.

O evento `autofill` e a propriedade CSS `field-sizing`

Se a propriedade CSS field-sizing tiver um valor de content, os campos, como o elemento <textarea>, serão redimensionados automaticamente para se ajustar ao conteúdo. Isso elimina a necessidade de barras de rolagem estranhas em campos pequenos:

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

É uma boa consideração de experiência do usuário, mas pode causar mudanças de layout. À medida que o usuário digita, a expansão do campo de entrada é gradual. No entanto, quando um navegador preenche automaticamente um endereço de várias linhas em um elemento <textarea>, o campo pode aumentar consideravelmente em um instante. Com o evento autofill, você pode gerenciar essas transições de maneira mais eficaz, por exemplo, animando o contêiner ou ajustando a posição de rolagem para evitar que o usuário perca o contexto.

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

Os requisitos de cada aplicativo são diferentes. Por isso, você precisa descobrir se esse é um padrão que vale a pena usar. No entanto, isso ilustra o que é possível alcançar usando uma combinação de CSS e o evento autofill.

Detectar e medir preenchimentos automáticos de formulários

Os dados de preenchimento automático de formulários são valiosos para as empresas, mas medir o preenchimento automático em formulários é difícil com os recursos da Web atuais. Por exemplo, a prática é usar a pseudoclasse CSS :autofill, que não é Baseline.

O evento autofill é uma ferramenta para detectar preenchimentos automáticos de formulários. Como o evento é acionado apenas em uma tentativa real de preenchimento automático, e não em qualquer entrada, e a propriedade event.autofillValues contém apenas os campos que foram preenchidos automaticamente, é possível rastrear os dados preenchidos 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);
});

Este exemplo é simplificado, mas mostra como é mais fácil capturar essas informações. Você pode estruturar e coletar dados de análise do preenchimento automático de uma maneira que funcione para você, sem soluções alternativas difíceis de implementar e não confiáveis.

Inscrever-se no teste de origem

O evento autofill está em um teste de origem do Chrome, e sua participação pode ajudar o Chrome a melhorar. Com os testes de origem, você pode testar recursos experimentais com usuários reais e enviar feedback à equipe do Chrome antes que a API faça parte da plataforma da Web.

Para começar a usar o evento autofill no seu site, inscreva-se no teste de origem aqui. O Chrome quer saber como você vai usar esse recurso e como ele pode nos ajudar a encontrar oportunidades de melhoria.

O evento de preenchimento automático está em teste de origem Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

autofill: resolvendo o que input e change não resolveram

O evento autofill e a pseudoclasse CSS :autofill

O evento autofill e a propriedade CSS field-sizing