Эта страница переведена с помощью Cloud Translation API.

Функция автозаполнения находится на стадии первоначального тестирования.

Jeremy Wagner

Опубликовано: 10 июня 2026 г.

Формы являются частым элементом взаимодействия в интернете, но они создают немало неудобств для пользователей. Браузеры уже давно предлагают функции автозаполнения, чтобы уменьшить эти неудобства, избавляя пользователей от повторяющихся задач, таких как ввод номеров кредитных карт, адресов и учетных данных для входа в систему.

Для разработчиков обработка автозаполнения форм представляет собой сложную задачу. Хотя разработчики могут отслеживать события input или change элементов <form> , эти события не сообщают, как данные попали в поле. Эта неясность затрудняет запуск конкретной логики — например, корректировки макета — в тот самый момент, когда форма заполняется автоматически. Новое событие autofill — теперь доступное в пробной версии Chrome Origin —

Начиная с Chrome версии 147, эта функция предоставляет разработчикам полезный сигнал о том, когда браузер помогает пользователю с автозаполнением.

`autofill` : решает проблему, с которой не справились `input` и `change`

События input и change представляют собой общие сигналы, которые не различают ситуации, когда пользователь вручную заполняет поле формы, и когда используется автозаполнение. Отсутствие отдельного события для автозаполнения форм затрудняет разработчикам надежное обновление пользовательского интерфейса, полезное при заполнении форм. Например, пользователь указывает страну своего проживания, и рядом появляется поле, указывающее штат или район, в котором он проживает, что различается в зависимости от страны. Запуск этого обновления в ответ на запрос автозаполнения более предсказуем для разработчиков и полезен для пользователей. Событие autofill решает эту проблему.

Событие autofill выполняется непосредственно перед тем, как браузер автоматически заполнит форму. Обработчик события получает массив autofillValues для автозаполнения и функцию refill . Обработчик может вызвать функцию refill , чтобы запросить у браузера повторное заполнение формы, если, например, обработчик изменил ее содержимое. Рассмотрим пример разметки формы:

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

Этот JavaScript-код привязывает событие autofill к 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();
});

В этом примере представлена типичная форма для ввода адреса. Пользователь может щелкнуть или коснуться поля формы, чтобы активировать всплывающую подсказку автозаполнения. При выборе адреса для автозаполнения происходит следующее:

Обработчик события autofill выполняется непосредственно перед автоматическим заполнением поля формы.
event.autofillValues предоставляет предлагаемые данные для автозаполнения в виде объекта с двумя свойствами:
- field : Ссылка на элемент DOM, который необходимо заполнить автоматически.
- value : Предлагаемое значение для автозаполнения поля.
Когда обнаруживается название поля «Страна», логика определяет страну — в данном примере Германию — и заполняет выпадающий список штатов соответствующими вариантами выбора для этой страны.
Вызов event.refill() дает указание браузеру повторно заполнить форму, что повторяет действие автозаполнения для измененной формы.

Если вас интересуют более сложные сценарии использования autofill , Йоав Вайс из Shopify создал две демонстрационные версии:

Форма для ввода личной информации , похожая на пример в этом посте, но выходящая за рамки базовой демонстрации события autofill .
Демонстрационный пример автозаполнения данных кредитной карты , использующий событие autofill для определения эмитента карты и существенного обновления DOM с помощью наглядных визуальных элементов.

Демонстрация автозаполнения данных кредитной карты наглядно демонстрирует возможности события autofill . Хотя подобные возможности существовали и до появления события autofill , наличие отдельного события для автозаполнения форм значительно упрощает работу разработчиков.

Событие `autofill` и псевдокласс CSS ` `:autofill`

Псевдокласс CSS ` :autofill соответствует элементам формы с автоматическим заполнением, а событие autofill может его дополнять.

Например, вы можете использовать :autofill , чтобы различать поля, которые были автоматически заполнены, и те, которые были изменены во время события autofill . Это может быть полезным сигналом для пользователя о том, что поле было предварительно заполнено, но наличие данных в редактируемом элементе управления формы говорит пользователю, что он все еще может изменить их при необходимости.

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

В предыдущем блоке кода происходит обход автоматически заполняемых полей до тех пор, пока не будет найдено поле с номером кредитной карты. Данные из этого поля используются для получения эмитента карты, который затем заполняется в поле и получает класс ` .modified-by-event . Стиль автозаполнения для этого поля можно настроить таким образом, чтобы он отличался от других автоматически заполняемых полей, не измененных событием 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;
}

Благодаря этому вы можете сохранить семантику стилей для автоматически заполняемых полей формы, наследовать стили :autofill и при этом обеспечить пользователю понятное отображение того, что поле формы было заполнено автоматически определенным образом.

Событие `autofill` и свойство CSS `field-sizing`

Если свойство CSS ` field-sizing имеет значение ` content , поля, подобные элементу <textarea> , автоматически изменяют свой размер в соответствии со своим содержимым. Это устраняет необходимость в неудобных полосах прокрутки в небольших полях:

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

Это важный аспект пользовательского опыта, но он может вызывать смещение макета. По мере ввода текста расширение поля ввода происходит постепенно. Однако, когда браузер автоматически заполняет многострочный адрес в элементе <textarea> , поле может мгновенно значительно расшириться. С помощью события autofill можно более эффективно управлять этими переходами, например, анимируя контейнер или корректируя его положение при прокрутке, чтобы пользователь не терял контекст.

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

Требования каждого приложения различны, поэтому вам нужно выяснить, стоит ли использовать этот шаблон, — но это наглядный пример того, чего можно достичь, используя комбинацию CSS и события autofill .

Обнаружение и измерение автозаполнения форм.

Аналитические данные об автозаполнении форм ценны для бизнеса, но измерение эффективности автозаполнения форм с помощью существующих веб-функций затруднительно. Например, обычно используют псевдокласс CSS ` :autofill , который не является стандартным.

Событие autofill — это инструмент для обнаружения автоматического заполнения форм. Поскольку событие срабатывает только при фактической попытке автозаполнения, а не при заполнении каких-либо полей ввода, а свойство event.autofillValues содержит только те поля, которые были заполнены автоматически, вы можете отслеживать данные, полученные автоматически:

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

Этот пример упрощен, но он показывает, насколько проще собирать эту информацию. Вы можете структурировать и собирать данные аналитики автозаполнения так, как вам удобно, без сложных в реализации и ненадежных обходных путей.

Зарегистрируйтесь для участия в первоначальном исследовании.

Функция autofill находится в тестовой версии Chrome, и ваше участие может помочь Chrome улучшить её. Тестовые версии позволяют тестировать экспериментальные функции с реальными пользователями и предоставлять обратную связь команде Chrome до того, как API станет частью веб-платформы.

Чтобы начать использовать функцию autofill на вашем сайте, зарегистрируйтесь для участия в пробной версии здесь . Chrome с нетерпением ждет, как вы будете ее использовать, и как это поможет нам найти возможности для улучшения.

autofill : решает проблему, с которой не справились input и change

Событие autofill и псевдокласс CSS ` :autofill

Событие autofill и свойство CSS field-sizing

Обнаружение и измерение автозаполнения форм.

Зарегистрируйтесь для участия в первоначальном исследовании.

`autofill` : решает проблему, с которой не справились `input` и `change`

Событие `autofill` и псевдокласс CSS ` `:autofill`

Событие `autofill` и свойство CSS `field-sizing`