發布日期：2026 年 6 月 10 日
表單是網路上常見的互動點，但使用者經常會遇到表單填寫問題。瀏覽器長期以來都提供自動填入功能，可減少這類摩擦，讓使用者不必重複輸入信用卡號碼、地址和登入憑證等資訊。
對開發人員來說，處理表單自動填入功能是一大難題。開發人員可以在 <form> 元素上監聽 input 或 change 事件，但這些事件不會告知您資料如何抵達欄位。因此，在表單自動填入資料的當下，很難觸發特定邏輯 (例如版面配置調整)。新的 autofill
event 現已推出，可做為 Chrome 來源試用使用
從 Chrome 147 開始，瀏覽器在協助使用者自動填入時，會為開發人員提供實用信號。
autofill：解決 input 和 change 未解決的問題
input 和 change 事件是通用信號，無法區分使用者手動填寫表單欄位和使用自動填入功能的情況。由於沒有專門用於自動填入表單的事件，開發人員更難以可靠地執行 UI 更新，這對填寫表單很有幫助。舉例來說，使用者指定居住國家/地區後，附近會顯示欄位，讓他們指定居住的州別或區別 (因國家/地區而異)。開發人員可以預測何時會因自動填入要求而觸發這項更新，使用者也能從中受益。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 會繫結 document 上的 autofill 事件：
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 的 Yoav Weiss 建立的兩個範例：
信用卡自動填入示範說明 autofill 事件的功能。雖然在 autofill 事件之前，這些類型的體驗就已存在，但表單自動填入專屬事件可提供更優質的開發人員體驗。
autofill 事件和 :autofill CSS 虛擬類別
:autofill CSS 虛擬類別會比對自動填入的表單元素，而 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 事件和 field-sizing CSS 屬性
如果 field-sizing CSS 屬性的值為 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 虛擬類別，但這並非 Baseline。
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 改善這項功能。原始碼試用
可讓您與實際使用者測試實驗功能，並在 API 成為網頁平台的一部分之前，向 Chrome 團隊提供意見。
如要在網站上開始使用 autofill 事件，請在此註冊原始碼試用計畫。Chrome 期待您使用這項功能，並協助我們找出改善機會。