El evento de autocompletar está en la prueba de origen

Jeremy Wagner

Publicado el 10 de junio de 2026

Los formularios son un punto de interacción frecuente en la Web, pero son responsables de una gran cantidad de fricción para los usuarios. Los navegadores ofrecen capacidades de autocompletado desde hace mucho tiempo para reducir esta fricción, lo que evita que los usuarios realicen tareas repetitivas, como ingresar números de tarjetas de crédito, direcciones y credenciales de acceso.

Para los desarrolladores, controlar los autocompletados de formularios es un desafío. Si bien los desarrolladores pueden escuchar eventos input o change en los elementos <form>, estos eventos no te indican cómo llegaron los datos al campo. Esta falta de claridad dificulta la activación de una lógica específica, como los ajustes de diseño, en el momento exacto en que se autocompleta un formulario. El nuevo evento autofill, que ahora está disponible como una prueba de origen de Chrome

a partir de Chrome 147, proporciona una señal útil para los desarrolladores cuando el navegador ayuda al usuario con el autocompletado.

autofill: Solución para lo que input y change no hicieron

Los eventos input y change son señales genéricas que no diferencian entre el usuario que completa manualmente un campo de formulario y cuando se usa el autocompletado. La falta de un evento dedicado para autocompletar formularios dificulta que los desarrolladores realicen de manera confiable actualizaciones de la IU que sean útiles cuando se completan formularios. Por ejemplo, un usuario especifica su país de residencia y aparece un campo cercano para especificar el estado o distrito en el que vive, que varía según el país. Activar esta actualización en respuesta a una solicitud de autocompletado es más predecible para los desarrolladores y útil para los usuarios. El evento autofill resuelve este problema.

El evento autofill se ejecuta justo antes de que el navegador autocomplete un formulario. El objeto de escucha del evento recibe un array de autofillValues para completar y una función refill. El objeto de escucha puede llamar a la función refill para solicitar que el navegador vuelva a completar el formulario si, por ejemplo, el objeto de escucha cambió el contenido. Observa este ejemplo de marcado de formulario:

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

Este JavaScript vincula el evento autofill en el 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 ejemplo es un formulario de dirección típico. El usuario puede hacer clic o presionar un campo de formulario para activar una información sobre la herramienta de autocompletado. Cuando se selecciona una dirección de autocompletado, sucede lo siguiente:

  1. El controlador de eventos autofill se ejecuta antes de que se autocomplete el campo del formulario.
  2. event.autofillValues proporciona los datos de autocompletado propuestos en un objeto con dos propiedades:
    • field: Una referencia al elemento DOM que se autocompletará.
    • value: El valor de autocompletado propuesto para el campo.
  3. Cuando se detecta el nombre del campo de país, la lógica detecta el país (Alemania en este ejemplo) y propaga el menú desplegable de estado con las opciones adecuadas para el país.
  4. Se llama a event.refill() para indicarle al navegador que vuelva a completar el formulario, lo que repite la acción de autocompletado en el formulario modificado.

Si te interesan los casos de uso más complejos de autofill, Yoav Weiss de Shopify creó dos demostraciones:

  1. Un formulario de información personal similar al ejemplo de esta publicación, pero que va más allá de una demostración básica del evento autofill.
  2. Una demostración de autocompletado de tarjetas de crédito que usa el evento autofill para detectar la entidad emisora de la tarjeta y actualizar el DOM de manera sustancial con imágenes enriquecidas.

La demostración de autocompletado de tarjetas de crédito ilustra las capacidades del evento autofill. Si bien estos tipos de experiencias eran posibles antes del evento autofill, tener un evento dedicado para el autocompletado de formularios ofrece una mejor experiencia para los desarrolladores.

El evento autofill y la pseudoclase CSS :autofill

La :autofill CSS pseudoclase coincide con los elementos de formulario autocompletados, y el evento autofill puede ser un complemento a ella.

Por ejemplo, es posible que quieras usar :autofill para diferenciar los campos que se acaban de autocompletar de los que se modificaron durante el evento autofill. Esta podría ser una señal útil para el usuario de que el campo se completó previamente, pero la existencia de los datos en un control de formulario editable le indica al usuario que aún puede cambiarlo si lo necesita.

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

En el bloque de código anterior, se recorren los campos autocompletados hasta que se encuentra el campo de número de tarjeta de crédito. Los datos del campo se usan para obtener la entidad emisora de la tarjeta, que se completa en el campo y se le asigna una clase de .modified-by-event. Luego, se puede ajustar el estilo de autocompletado de este campo para que sea distinto de otros campos autocompletados que no se modificaron con el 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;
}

Con esto, puedes conservar la semántica de estilo para los campos de formulario autocompletados, heredar estilos :autofill y, aun así, proporcionar una presentación significativa al usuario de que el campo de formulario se autocompletó de una manera distinta.

El evento autofill y la propiedad CSS field-sizing

Si la propiedad CSS field-sizing tiene un valor de content, los campos como el elemento <textarea> cambian de tamaño automáticamente para adaptarse a su contenido. Esto elimina la necesidad de barras de desplazamiento incómodas en campos pequeños:

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

Es una buena consideración de la experiencia del usuario, pero puede causar cambios de diseño. A medida que un usuario escribe, la expansión del campo de entrada es gradual. Sin embargo, cuando un navegador autocompleta una dirección de varias líneas en un elemento <textarea>, el campo puede expandirse considerablemente en un instante. Con el evento autofill, puedes administrar estas transiciones de manera más eficaz, por ejemplo, animando el contenedor o ajustando su posición de desplazamiento para evitar que el usuario pierda el 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();
  }
});

Los requisitos de cada aplicación son diferentes, por lo que debes determinar si este es un patrón que vale la pena usar, pero esto ilustra lo que se puede lograr con una combinación de CSS y el evento autofill.

Detecta y mide los autocompletados de formularios

Los datos de estadísticas de los autocompletados de formularios son valiosos para las empresas, pero medir autocompletados en formularios es difícil con las funciones web existentes. Por ejemplo, la práctica es depender de la pseudoclase CSS :autofill, que no es Baseline.

El evento autofill es una herramienta para detectar autocompletados de formularios. Debido a que el evento se activa solo en un intento de autocompletado real y no en ninguna entrada, y la propiedad event.autofillValues contiene solo los campos que se autocompletaron, puedes hacer un seguimiento de los datos autocompletados:

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 ejemplo es simplificado, pero muestra lo mucho más sencillo que es capturar esta información. Puedes estructurar y recopilar datos de estadísticas de autocompletado de una manera que te resulte útil, sin soluciones alternativas difíciles de implementar y poco confiables.

Regístrate en la prueba de origen

El evento autofill está en una prueba de origen de Chrome, y tu participación puede ayudar a Chrome a mejorarlo. Las pruebas de origen te permiten probar funciones experimentales con usuarios reales y enviar comentarios al equipo de Chrome antes de que la API forme parte de la plataforma web.

Para comenzar a usar el evento autofill en tu sitio, regístrate en la prueba de origen aquí. Chrome espera ver cómo lo usas y cómo eso puede ayudarnos a encontrar oportunidades de mejora.