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

Sự kiện tự động điền đang trong bản dùng thử theo nguyên gốc

Jeremy Wagner

Ngày xuất bản: 10 tháng 6 năm 2026

Biểu mẫu là điểm tương tác thường xuyên trên web, nhưng chúng gây ra khá nhiều khó khăn cho người dùng. Từ lâu, các trình duyệt đã cung cấp tính năng tự động điền để giảm bớt khó khăn này, giúp người dùng không phải thực hiện các thao tác lặp đi lặp lại như nhập số thẻ tín dụng, địa chỉ và thông tin đăng nhập.

Đối với nhà phát triển, việc xử lý tính năng tự động điền biểu mẫu là một thách thức. Mặc dù nhà phát triển có thể theo dõi các sự kiện input hoặc change trên các phần tử <form>, nhưng các sự kiện này không cho bạn biết dữ liệu đến trường như thế nào. Việc thiếu thông tin rõ ràng này khiến bạn khó kích hoạt logic cụ thể (chẳng hạn như điều chỉnh bố cục) vào đúng thời điểm biểu mẫu được tự động điền. Sự kiện autofill mới (hiện có dưới dạng bản dùng thử theo nguồn gốc của Chrome)

bắt đầu từ Chrome 147 – cung cấp tín hiệu hữu ích cho nhà phát triển khi trình duyệt hỗ trợ người dùng tự động điền.

`autofill`: giải quyết những vấn đề mà `input` và `change` không giải quyết được

Các sự kiện input và change là các tín hiệu chung không phân biệt giữa trường hợp người dùng tự điền vào trường biểu mẫu và trường hợp sử dụng tính năng tự động điền. Việc thiếu sự kiện dành riêng cho việc tự động điền biểu mẫu khiến nhà phát triển khó thực hiện các bản cập nhật giao diện người dùng một cách đáng tin cậy, giúp ích khi điền biểu mẫu. Ví dụ: người dùng chỉ định quốc gia cư trú và một trường gần đó sẽ xuất hiện để chỉ định tiểu bang hoặc quận mà họ sinh sống (tuỳ theo quốc gia). Việc kích hoạt bản cập nhật này để phản hồi yêu cầu tự động điền sẽ dễ dự đoán hơn đối với nhà phát triển và hữu ích cho người dùng. Sự kiện autofill giải quyết vấn đề này.

Sự kiện autofill sẽ thực thi ngay trước khi trình duyệt tự động điền vào biểu mẫu. Trình nghe cho sự kiện này sẽ nhận được một mảng autofillValues cần điền và một hàm refill. Trình nghe có thể gọi hàm refill để yêu cầu trình duyệt điền lại biểu mẫu nếu, chẳng hạn như trình nghe đã thay đổi nội dung. Hãy xem mã đánh dấu biểu mẫu ví dụ này:

<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 này liên kết sự kiện autofill trên 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();
});

Ví dụ này là một biểu mẫu địa chỉ điển hình. Người dùng có thể nhấp hoặc nhấn vào một trường biểu mẫu để kích hoạt chú giải công cụ tự động điền. Khi người dùng chọn địa chỉ tự động điền, những điều sau đây sẽ xảy ra:

Trình xử lý sự kiện autofill sẽ thực thi ngay trước khi trường biểu mẫu được tự động điền.
event.autofillValues cung cấp dữ liệu tự động điền được đề xuất trong một đối tượng có 2 thuộc tính:
- field: Tham chiếu đến phần tử DOM cần tự động điền.
- value: Giá trị tự động điền được đề xuất cho trường.
Khi phát hiện thấy tên trường quốc gia, logic sẽ phát hiện quốc gia (Đức trong ví dụ này) và điền vào trình đơn thả xuống tiểu bang các lựa chọn phù hợp cho quốc gia đó.
event.refill() được gọi để hướng dẫn trình duyệt điền lại biểu mẫu, lặp lại hành động tự động điền trên biểu mẫu đã thay đổi.

Nếu bạn quan tâm đến các trường hợp sử dụng autofill phức tạp hơn, Yoav Weiss của Shopify đã tạo 2 bản minh hoạ:

Một biểu mẫu thông tin cá nhân tương tự như ví dụ trong bài đăng này, nhưng vượt xa bản minh hoạ cơ bản về sự kiện autofill.
Bản minh hoạ tự động điền thẻ tín dụng sử dụng sự kiện autofill để phát hiện tổ chức phát hành thẻ và cập nhật DOM đáng kể bằng hình ảnh trực quan phong phú.

Bản minh hoạ tự động điền thẻ tín dụng minh hoạ các khả năng của sự kiện autofill. Mặc dù bạn có thể tạo những loại trải nghiệm này trước sự kiện autofill, nhưng việc có một sự kiện dành riêng cho việc tự động điền biểu mẫu sẽ mang lại trải nghiệm tốt hơn cho nhà phát triển.

Sự kiện `autofill` và pseudo-class CSS `:autofill`

Pseudo-class CSS :autofill khớp với các phần tử biểu mẫu được tự động điền và sự kiện autofill có thể bổ sung cho pseudo-class này.

Ví dụ: bạn có thể muốn sử dụng :autofill để phân biệt các trường vừa được tự động điền với các trường đã được sửa đổi trong sự kiện autofill Đây có thể là tín hiệu hữu ích cho người dùng biết rằng trường này đã được điền sẵn, nhưng sự tồn tại của dữ liệu trong một chế độ kiểm soát biểu mẫu có thể chỉnh sửa cho người dùng biết rằng họ vẫn có thể thay đổi dữ liệu đó nếu cần.

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

Trong khối mã trước đó, các trường được tự động điền sẽ được duyệt cho đến khi tìm thấy trường số thẻ tín dụng. Dữ liệu trong trường này được dùng để lấy tổ chức phát hành thẻ, được điền sẵn vào trường và được gán lớp .modified-by-event. Sau đó, bạn có thể điều chỉnh kiểu tự động điền cho trường này để khác biệt với các trường được tự động điền khác không được sửa đổi bởi sự kiện 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;
}

Với cách này, bạn có thể giữ nguyên ngữ nghĩa kiểu cho các trường biểu mẫu được tự động điền, kế thừa các kiểu :autofill và vẫn cung cấp bản trình bày có ý nghĩa cho người dùng rằng trường biểu mẫu đã được tự động điền theo một cách riêng biệt.

Sự kiện `autofill` và thuộc tính CSS `field-sizing`

Nếu thuộc tính CSS field-sizing có giá trị là content, thì các trường như phần tử <textarea> sẽ tự động đổi kích thước để phù hợp với nội dung của chúng. Điều này giúp bạn không cần dùng thanh cuộn khó sử dụng trong các trường nhỏ:

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

Đây là một yếu tố cần cân nhắc để mang lại trải nghiệm tốt cho người dùng, nhưng có thể gây ra hiện tượng chuyển đổi bố cục. Khi người dùng nhập, trường nhập dữ liệu sẽ mở rộng dần. Tuy nhiên, khi trình duyệt tự động điền địa chỉ nhiều dòng vào phần tử <textarea>, trường này có thể mở rộng đáng kể ngay lập tức. Với sự kiện autofill, bạn có thể quản lý các quá trình chuyển đổi này hiệu quả hơn, chẳng hạn như bằng cách tạo hiệu ứng động cho vùng chứa hoặc điều chỉnh vị trí cuộn của vùng chứa để tránh người dùng mất ngữ cảnh.

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

Mỗi ứng dụng có các yêu cầu khác nhau, vì vậy, bạn cần xác định xem đây có phải là mẫu đáng sử dụng hay không. Tuy nhiên, mẫu này minh hoạ những gì có thể đạt được khi kết hợp CSS và sự kiện autofill.

Phát hiện và đo lường tính năng tự động điền biểu mẫu

Dữ liệu phân tích về tính năng tự động điền biểu mẫu rất có giá trị đối với doanh nghiệp, nhưng việc đo lường tính năng tự động điền trên biểu mẫu rất khó thực hiện với các tính năng hiện có trên web. Ví dụ: bạn thường phải dựa vào pseudo-class CSS :autofill không phải là Baseline.

Sự kiện autofill là một công cụ để phát hiện tính năng tự động điền biểu mẫu. Vì sự kiện này chỉ kích hoạt khi có nỗ lực tự động điền thực tế chứ không phải khi có bất kỳ dữ liệu đầu vào nào và thuộc tính event.autofillValues chỉ chứa các trường được tự động điền, nên bạn có thể theo dõi dữ liệu được tự động điền:

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

Ví dụ này được đơn giản hoá, nhưng cho thấy việc thu thập thông tin này đơn giản hơn nhiều. Bạn có thể cấu trúc và thu thập dữ liệu phân tích về tính năng tự động điền theo cách phù hợp với mình mà không cần các giải pháp thay thế khó triển khai và không đáng tin cậy.

Đăng ký bản dùng thử theo nguồn gốc

Sự kiện autofill đang trong bản dùng thử theo nguồn gốc của Chrome và sự tham gia của bạn có thể giúp Chrome cải thiện sự kiện này. Bản dùng thử theo nguồn gốc cho phép bạn kiểm thử các tính năng thử nghiệm với người dùng thực và cung cấp ý kiến phản hồi cho nhóm Chrome trước khi API trở thành một phần của nền tảng web.

Để bắt đầu sử dụng sự kiện autofill trên trang web của bạn, hãy đăng ký bản dùng thử theo nguồn gốc tại đây. Chrome rất mong được thấy cách bạn sử dụng sự kiện này và cách sự kiện này có thể giúp chúng tôi tìm thấy cơ hội cải thiện.

Sự kiện tự động điền đang trong bản dùng thử theo nguyên gốc Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

autofill: giải quyết những vấn đề mà input và change không giải quyết được

Sự kiện autofill và pseudo-class CSS :autofill

Sự kiện autofill và thuộc tính CSS field-sizing