Peristiwa isi otomatis dalam uji coba origin

Jeremy Wagner

Dipublikasikan: 10 Juni 2026

Formulir adalah titik interaksi yang sering dijumpai di web, tetapi formulir juga menjadi penyebab gesekan yang cukup besar bagi pengguna. Browser telah lama menawarkan kemampuan isi otomatis untuk mengurangi gesekan ini, sehingga pengguna tidak perlu melakukan tugas berulang seperti memasukkan nomor kartu kredit, alamat, dan kredensial login.

Bagi developer, menangani isi otomatis formulir adalah tantangan. Meskipun developer dapat memproses peristiwa input atau change pada elemen <form>, peristiwa ini tidak memberi tahu Anda bagaimana data dimasukkan ke dalam kolom. Kurangnya kejelasan ini membuat sulit untuk memicu logika tertentu—seperti penyesuaian tata letak—pada saat formulir diisi otomatis. Peristiwa autofill baru—yang kini tersedia sebagai uji coba origin Chrome

mulai di Chrome 147—memberikan sinyal yang berguna bagi developer saat browser membantu pengguna dengan isi otomatis.

autofill: memecahkan masalah yang tidak dapat diselesaikan oleh input dan change

Peristiwa input dan change adalah sinyal umum yang tidak membedakan antara pengguna yang mengisi kolom formulir secara manual dan saat isi otomatis digunakan. Tidak adanya peristiwa khusus untuk formulir isi otomatis membuat developer lebih sulit melakukan update UI yang berguna saat mengisi formulir. Misalnya, pengguna menentukan negara tempat tinggalnya, dan kolom terdekat muncul untuk menentukan negara bagian atau distrik tempat tinggalnya, yang berbeda-beda menurut negara. Memicu update ini sebagai respons terhadap permintaan isi otomatis lebih mudah diprediksi bagi developer dan berguna bagi pengguna. Peristiwa autofill memecahkan masalah ini.

Peristiwa autofill dieksekusi tepat sebelum browser mengisi formulir secara otomatis. Pemroses untuk peristiwa ini menerima array autofillValues yang akan diisi dan fungsi refill. Pemroses dapat memanggil fungsi refill untuk meminta browser mengisi ulang formulir jika, misalnya, pemroses telah mengubah konten. Lihat contoh markup formulir ini:

<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 ini mengikat peristiwa autofill pada 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();
});

Contoh ini adalah formulir alamat standar. Pengguna dapat mengklik atau mengetuk kolom formulir untuk memicu tooltip isi otomatis. Saat alamat isi otomatis dipilih, hal berikut akan terjadi:

  1. Pemroses peristiwa autofill dieksekusi sebelum kolom formulir diisi otomatis.
  2. event.autofillValues memberikan data isi otomatis yang diusulkan dalam objek dengan dua properti:
    • field: Referensi ke elemen DOM yang akan diisi otomatis.
    • value: Nilai isi otomatis yang diusulkan untuk kolom.
  3. Saat nama kolom negara terdeteksi, logika akan mendeteksi negara—Jerman dalam contoh ini—dan mengisi menu dropdown negara bagian dengan pilihan yang tepat untuk negara tersebut.
  4. event.refill() dipanggil untuk menginstruksikan browser mengisi ulang formulir, yang mengulangi tindakan isi otomatis pada formulir yang diubah.

Jika Anda tertarik dengan kasus penggunaan autofill yang lebih rumit, Yoav Weiss dari Shopify telah membuat dua demo:

  1. Formulir informasi pribadi yang mirip dengan contoh dalam postingan ini, tetapi lebih dari sekadar demonstrasi dasar peristiwa autofill.
  2. Demo isi otomatis kartu kredit yang menggunakan peristiwa autofill untuk mendeteksi penerbit kartu dan memperbarui DOM secara substansial dengan visual yang kaya.

Demo isi otomatis kartu kredit menggambarkan kemampuan peristiwa autofill. Meskipun jenis pengalaman ini dapat dilakukan sebelum peristiwa autofill, memiliki peristiwa khusus untuk formulir isi otomatis memberikan pengalaman developer yang lebih baik.

Peristiwa autofill dan pseudo-class CSS :autofill

Pseudo-class CSS :autofill cocok dengan elemen formulir yang diisi otomatis, dan peristiwa autofill dapat menjadi pelengkap nya.

Misalnya, Anda mungkin ingin menggunakan :autofill untuk membedakan kolom yang baru saja diisi otomatis dari kolom yang diubah selama peristiwa autofill event. Ini dapat menjadi sinyal yang berguna bagi pengguna bahwa kolom telah diisi sebelumnya, tetapi keberadaan data dalam kontrol formulir yang dapat diedit memberi tahu pengguna bahwa mereka masih dapat mengubahnya jika perlu.

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

Pada blok kode sebelumnya, kolom yang diisi otomatis akan ditelusuri hingga kolom nomor kartu kredit ditemukan. Data di kolom digunakan untuk mendapatkan penerbit kartu, yang diisi ke dalam kolom dan diberi class .modified-by-event. Gaya isi otomatis untuk kolom ini kemudian dapat disesuaikan agar berbeda dari kolom isi otomatis lainnya yang tidak diubah oleh peristiwa 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;
}

Dengan demikian, Anda dapat mempertahankan semantik gaya untuk kolom formulir yang diisi otomatis, mewarisi gaya :autofill, dan tetap memberikan presentasi yang bermakna kepada pengguna bahwa kolom formulir telah diisi otomatis dengan cara yang berbeda.

Peristiwa autofill dan properti CSS field-sizing

Jika properti CSS field-sizing memiliki nilai content, kolom seperti elemen <textarea> akan otomatis diubah ukurannya agar sesuai dengan kontennya. Hal ini menghilangkan kebutuhan akan scrollbar yang canggung di kolom kecil:

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

Ini adalah pertimbangan pengalaman pengguna yang baik, tetapi dapat menyebabkan perubahan tata letak. Saat pengguna mengetik, perluasan kolom input akan bertahap. Namun, saat browser mengisi otomatis alamat multi-baris ke dalam elemen <textarea>, kolom mungkin akan diperluas secara signifikan dalam sekejap. Dengan peristiwa autofill, Anda dapat mengelola transisi ini dengan lebih efektif, misalnya, dengan menganimasikan penampung atau menyesuaikan posisi scroll-nya agar pengguna tidak kehilangan konteks.

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

Setiap persyaratan aplikasi berbeda-beda, jadi Anda harus menentukan apakah pola ini layak digunakan—tetapi hal ini menggambarkan apa yang dapat dicapai menggunakan kombinasi CSS dan peristiwa autofill.

Mendeteksi dan mengukur formulir isi otomatis

Data analisis formulir isi otomatis sangat berharga bagi bisnis, tetapi mengukur isi otomatis pada formulir sulit dilakukan dengan fitur web yang ada. Misalnya, praktik ini bergantung pada pseudo-class CSS :autofill, yang bukan Baseline.

Peristiwa autofill adalah alat untuk mendeteksi formulir isi otomatis. Karena peristiwa hanya diaktifkan pada upaya isi otomatis yang sebenarnya dan bukan pada input apa pun, dan properti event.autofillValues hanya berisi kolom yang diisi otomatis, Anda dapat melacak data yang diisi otomatis:

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

Contoh ini disederhanakan, tetapi menunjukkan betapa lebih mudahnya menangkap informasi ini. Anda dapat menyusun dan mengumpulkan data analisis isi otomatis dengan cara yang sesuai untuk Anda, tanpa solusi yang sulit diterapkan dan tidak dapat diandalkan.

Mendaftar untuk uji coba origin

Peristiwa autofill berada dalam uji coba origin Chrome, dan partisipasi Anda dapat membantu Chrome menjadi lebih baik. Uji coba origin memungkinkan Anda menguji fitur eksperimental dengan pengguna sungguhan dan memberikan masukan kepada tim Chrome sebelum API menjadi bagian dari platform web.

Untuk mulai menggunakan peristiwa autofill di situs Anda, daftar uji coba origin di sini. Chrome ingin melihat cara Anda menggunakannya, dan bagaimana hal tersebut dapat membantu kami menemukan peluang peningkatan.