Zdarzenie autouzupełniania jest w okresie testowania origin

Jeremy Wagner

Opublikowano: 10 czerwca 2026 r.

Formularze są częstym punktem interakcji w internecie, ale powodują sporo problemów dla użytkowników. Przeglądarki od dawna oferują funkcję autouzupełniania, aby zmniejszyć te trudności i ułatwić użytkownikom wykonywanie powtarzalnych zadań, takich jak wpisywanie numerów kart kredytowych, adresów i danych logowania.

Dla deweloperów obsługa automatycznego wypełniania formularzy jest wyzwaniem. Programiści mogą nasłuchiwać zdarzeń input lub change w elementach <form>, ale te zdarzenia nie informują o tym, jak dane trafiły do pola. Ten brak jasności utrudnia wywoływanie określonej logiki, np. dostosowywania układu, w momencie automatycznego wypełniania formularza. Nowe autofillwydarzenie – dostępne teraz w ramach testowania origin w Chrome

od wersji Chrome 147 – zapewnia deweloperom przydatny sygnał, gdy przeglądarka pomaga użytkownikowi w autouzupełnianiu.

autofill: rozwiązanie problemów, z którymi nie poradzili sobie input i change;

Zdarzenia input i change to ogólne sygnały, które nie rozróżniają, czy użytkownik ręcznie wypełnia pole formularza, czy używa autouzupełniania. Brak dedykowanego zdarzenia do autouzupełniania formularzy utrudnia deweloperom niezawodne przeprowadzanie aktualizacji interfejsu, które są przydatne podczas wypełniania formularzy. Na przykład użytkownik podaje kraj zamieszkania, a w pobliżu pojawia się pole, w którym może określić stan lub okręg, w którym mieszka. Zależy to od kraju. Wywoływanie tej aktualizacji w odpowiedzi na żądanie autouzupełniania jest bardziej przewidywalne dla deweloperów i przydatne dla użytkowników. Wydarzenie autofill rozwiązuje ten problem.

Zdarzenie autofill jest wykonywane tuż przed automatycznym wypełnieniem formularza przez przeglądarkę. Odbiornik zdarzenia otrzymuje tablicę autofillValues do wypełnienia i funkcję refill. Detektor może wywołać funkcję refill, aby poprosić przeglądarkę o ponowne wypełnienie formularza, np. jeśli zmienił jego zawartość. Weźmy przykładowy kod formularza:

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

Ten kod JavaScript wiąże zdarzenie autofill z elementem 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();
});

Ten przykład przedstawia typowy formularz adresu. Użytkownik może kliknąć lub dotknąć pole formularza, aby wyświetlić etykietkę autouzupełniania. Gdy wybierzesz adres z autouzupełniania, nastąpią te działania:

1. Procedura obsługi zdarzeń autofill jest wykonywana bezpośrednio przed automatycznym wypełnieniem pola formularza.
2. event.autofillValues podaje proponowane dane autouzupełniania w obiekcie z 2 właściwościami:
   • field: odwołanie do elementu DOM, który ma zostać automatycznie uzupełniony.
   • value: proponowana wartość autouzupełniania pola.
3. Gdy nazwa pola kraju zostanie wykryta, logika wykryje kraj – w tym przykładzie Niemcy – i wypełni menu stanu odpowiednimi opcjami dla tego kraju.
4. event.refill() jest wywoływana, aby poinstruować przeglądarkę, że ma ponownie wypełnić formularz, co powtarza działanie autouzupełniania w zmienionym formularzu.

Jeśli interesują Cię bardziej złożone autofill przypadki użycia, Yoav Weiss z Shopify przygotował 2 wersje demonstracyjne:

1. Formularz danych osobowych, który jest podobny do przykładu w tym poście, ale wykracza poza podstawową demonstrację zdarzenia autofill.
2. Demonstracja autouzupełniania danych karty kredytowej, która używa zdarzenia autofill do wykrywania wydawcy karty i aktualizowania DOM za pomocą bogatych elementów wizualnych.

Demonstracja autouzupełniania danych karty kredytowej ilustruje możliwości zdarzenia autofill. Chociaż takie działania były możliwe przed zdarzeniem autofill, dedykowane zdarzenie do automatycznego wypełniania formularzy zapewnia lepsze wrażenia deweloperom.

Zdarzenie autofill i pseudoklasa CSS :autofill

:autofillPseudoklasa CSS dopasowuje automatycznie wypełnione elementy formularza, a zdarzenie autofill może być jej uzupełnieniem.

Możesz na przykład użyć :autofill, aby odróżnić pola, które zostały automatycznie wypełnione, od tych, które zostały zmodyfikowane podczas zdarzenia autofill. Może to być przydatny sygnał dla użytkownika, że pole zostało wstępnie wypełnione, ale obecność danych w edytowalnym elemencie sterującym formularza informuje użytkownika, że w razie potrzeby może je zmienić.

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

W poprzednim bloku kodu pola wypełniane automatycznie są sprawdzane, aż zostanie znalezione pole numeru karty kredytowej. Dane w tym polu służą do uzyskiwania informacji o wydawcy karty, które są wpisywane w tym polu i otrzymują klasę .modified-by-event. Styl autouzupełniania tego pola można następnie dostosować tak, aby odróżniał się od innych pól autouzupełnianych, które nie zostały zmodyfikowane przez zdarzenie 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;
}

Dzięki temu możesz zachować semantykę stylów w przypadku automatycznie wypełnianych pól formularza, dziedziczyć style :autofill i nadal zapewniać użytkownikowi czytelny sposób prezentacji, że pole formularza zostało automatycznie wypełnione w odmienny sposób.

Zdarzenie autofill i właściwość CSS field-sizing

Jeśli field-sizingwłaściwość CSS ma wartość content, pola takie jak element <textarea> automatycznie zmieniają rozmiar, aby dopasować się do zawartości. Eliminuje to konieczność stosowania niewygodnych pasków przewijania w małych polach:

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

To ważne z punktu widzenia wygody użytkowników, ale może powodować przesunięcia układu. W miarę wpisywania tekstu przez użytkownika pole do wprowadzania danych stopniowo się powiększa. Jeśli jednak przeglądarka automatycznie wypełni wielowierszowy adres w elemencie <textarea>, pole może się natychmiast znacznie powiększyć. Za pomocą zdarzenia autofill możesz skuteczniej zarządzać tymi przejściami, np. animując kontener lub dostosowując jego pozycję przewijania, aby użytkownik nie stracił kontekstu.

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

Wymagania każdej aplikacji są inne, więc musisz sprawdzić, czy warto użyć tego wzorca. Ten przykład pokazuje jednak, co można osiągnąć, stosując kombinację CSS i zdarzenia autofill.

Wykrywanie i pomiar autouzupełniania formularzy

Dane Analytics dotyczące autouzupełniania formularzy są cenne dla firm, ale pomiar autouzupełniania w formularzach jest trudny przy użyciu obecnych funkcji internetowych. Na przykład polega na pseudoklasie CSS :autofill, która nie jest zgodna z Baseline.

Zdarzenie autofill służy do wykrywania autouzupełniania formularzy. Zdarzenie jest wywoływane tylko w przypadku rzeczywistej próby autouzupełniania, a nie w przypadku jakiegokolwiek wprowadzania danych, a właściwość event.autofillValues zawiera tylko pola, które zostały autouzupełnione. Dzięki temu możesz śledzić autouzupełnione dane:

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

Ten przykład jest uproszczony, ale pokazuje, jak łatwiej jest rejestrować te informacje. Możesz strukturyzować i zbierać dane analityczne autouzupełniania w sposób, który Ci odpowiada, bez obejść, które są trudne do wdrożenia i niewiarygodne.

Rejestracja w testowaniu origin

Zdarzenie autofill jest dostępne w ramach testów origin w Chrome, a Twój udział może pomóc nam ulepszyć tę funkcję. Testy pochodzenia pozwalają testować funkcje eksperymentalne z udziałem prawdziwych użytkowników i przekazywać zespołowi Chrome opinie, zanim interfejs API stanie się częścią platformy internetowej.

Aby zacząć korzystać ze zdarzenia autofill w swojej witrynie, zarejestruj się w programie testów pochodzenia. Chrome z niecierpliwością czeka na to, jak będziesz z niej korzystać i jak pomoże nam to znaleźć możliwości ulepszeń.