評估表單中的瀏覽器自動填入功能

Maud Nalpas
Maud Nalpas
X GitHub

發布日期：2024 年 11 月 20 日

電子商務的成功關鍵在於提供流暢的結帳流程。表單是轉換的關鍵。為了改善使用者體驗，請務必瞭解使用者如何與表單互動。自動填入功能在這項程序中扮演重要角色。

Chrome 自動填入功能的示範。
Chrome 中的自動填入功能

順暢的自動填入體驗可提高轉換率、加快表單提交速度、降低表單放棄率，並提升使用者滿意度。

不過，您是否瞭解網站上的自動填入使用情形和使用者體驗？

本指南說明如何收集及分析使用者在表單中使用自動填入功能的資料。

以下是如何使用這些自動填入洞察資料：

  • 將測試方法與實際使用者工作流程保持一致。如果自動填入使用洞察資料顯示使用者大量依賴自動填入功能，您就知道必須在工作流程中納入自動填入測試。
  • 找出回歸現象。比較影響表單使用者體驗的部署作業中，個別欄位上的自動填入使用信號。如果變化幅度較大，可能表示自動填入行為已退化。
  • 確保自動填入功能的實作方式能正常運作。偵測使用者似乎手動填寫您希望他們使用自動填入功能的欄位。

示範和程式碼

試用示範，並研究 GitHub 上的程式碼。

自動填入觀測器的示範。
使用示範程式碼，透過程式輔助方式觀察使用者在每個表單欄位上的動作 (空白、手動填入、自動填入，或自動填入並修改欄位)。 試試看。

試試以下主題：

  • 自動填入所有欄位。
  • 在欄位中填入自動填入內容，然後手動清空。
  • 自動填入欄位，然後手動修改。
  • 手動填寫整個欄位。
  • 將欄位留空。

瀏覽器支援

這個示範適用於最新的裝置和瀏覽器版本。這項功能會偵測 :autofill CSS 擬物類別，該類別在各瀏覽器中皆獲得良好支援。

步驟 1：收集自動填入資料

定義自動填入狀態

首先，請定義您感興趣的可能自動填入欄位狀態：

  • EMPTY：使用者未在欄位中輸入內容。
  • AUTOFILLED：使用者只使用自動填入功能填入欄位。
  • AUTOFILLED_THEN_MODIFIED：使用者先使用自動填入功能填入欄位，然後手動編輯自動填入的值。例如，使用者可透過自動填入功能填入地址和聯絡資訊，但手動輸入不同的電話號碼。
  • ONLY_MANUAL：使用者完全手動填寫欄位。
// Possible values for autofill statuses const EMPTY = 'empty'; const AUTOFILLED = 'autofilled'; const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified'; const ONLY_MANUAL = 'only-manual';

實作公用函式

接下來，我們要實作這段程式碼的核心功能：檢查欄位是否剛剛已自動填入。實際上，這會使用兩個函式：

  • getAllAutofilledFields 會查看指定表單中的所有 <input> 和 <select> 元素，並檢查是否有 :autofill CSS 擬造類別。這個指令會輸出已自動填入的元素清單。
  • checkIsAutofilled 接著會檢查特定元素是否屬於此清單。
// Get all elements that are autofilled, using the :autofill pseudo-class function getAllAutofilledFields(formElement) {   return formElement.querySelectorAll(':autofill'); }  // Check if the passed element is in the list of autofilled fields function checkIsAutofilled(allAutofilledFields, fieldElement) {   return Array.from(allAutofilledFields).includes(fieldElement); }  // Usage const allAutofilledFields = getAllAutofilledFields(formElement); const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);

此外，您需要公用函式來檢查欄位是否為空白。

// Check if the value of the element is empty function checkIsEmpty(fieldElement) {   const value = fieldElement.value.trim();   // value is a string, even for a type = number field   const isEmpty = value === '';   return isEmpty; }

初始化自動填入狀態

建立全域物件 autofillStatuses，用來儲存每個欄位的自動填入狀態。

從表單收集所有欄位 id，並將每個欄位的狀態初始化為 EMPTY。

// Global variable storing autofill statuses for each field const autofillStatuses = {}; // Example: { //     "name": "autofilled", //     "street-address": "autofilled-then-modified", //     "country": "only-manual" // }  // Initialize autofill status for all fields function initializeAutofillStatuses(formElement) {   const allFieldsAsArray = getAllFieldsAsArray(formElement);   allFieldsAsArray.forEach((fieldElement) => {     autofillStatuses[fieldElement.id] = EMPTY;   }); }  initializeAutofillStatuses(document.getElementById('form'));

如要收集您感興趣的所有欄位元素，initializeAutofillStatuses 會使用公用函式：

// Collect all field elements for a given form function getAllFieldsAsArray(formElement) {   return Array.from(formElement.querySelectorAll('input, select')); }

觀察變更

一切就緒後，您就可以觀察自動填入行為。

為每個表單元素附加變更事件監聽器。發生變更時，系統會使用 checkIsAutofilled 公用函式，檢查元素目前是否正在自動填入。接著，系統會根據目前和先前的狀態，在 autofillStatuses 物件中更新元素的自動填入狀態。

舉例來說，如果先前的狀態為 AUTOFILLED，且欄位目前未自動填入 (也就是沒有 :autofill 類別)，表示欄位是在自動填入後手動更新。因此狀態會更新為 AUTOFILLED_THEN_MODIFIED。

// Add event listener to all fields to update autofill status function initializeChangeObserver(formElement) {   const allFieldsAsArray = getAllFieldsAsArray(formElement);   allFieldsAsArray.forEach((fieldElement) => {     fieldElement.addEventListener('change', () => {       updateAutofillStatus(formElement, fieldElement);     });   }); }  // Update autofill status function updateAutofillStatus(formElement, fieldElement) {   const isEmpty = checkIsEmpty(fieldElement);   const allAutofilledFields = getAllAutofilledFields(formElement);   const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);   const previousAutofillStatus = autofillStatuses[fieldElement.id];   if (isEmpty) {     autofillStatuses[fieldElement.id] = EMPTY;     // NOTE: if (previousAutofillStatus === AUTOFILLED), the field has just been emptied manually. Autofill can't empty fields.   } else {     if (isAutofilled) {       autofillStatuses[fieldElement.id] = AUTOFILLED;     } else {       if (         previousAutofillStatus === ONLY_MANUAL ||         previousAutofillStatus === EMPTY       ) {         // NOTE: ONLY_MANUAL is only used for fields where autofilled was *never* used. A field where autofilled was used will be AUTOFILLED_THEN_MODIFIED, even if the user has completely retyped the whole value         autofillStatuses[fieldElement.id] = ONLY_MANUAL;       } else if (         previousAutofillStatus === AUTOFILLED ||         previousAutofillStatus === AUTOFILLED_THEN_MODIFIED       ) {         autofillStatuses[fieldElement.id] = AUTOFILLED_THEN_MODIFIED;       }     }   } }  initializeChangeObserver(document.getElementById('form'));

將結果傳送至伺服器

提交表單後，請將 autofillStatuses 物件傳送至伺服器。舉例來說，如果是地址表單，您會在伺服器上收到以下資料：

{     "name": "only-manual",     "street-address": "only-manual",     "postal-code": "autofilled-then-modified",     "city": "autofilled",     "country": "autofilled" }
自動填入觀察工具範例：顯示各種自動填入狀態的區域。
顯示各種欄位自動填入狀態的區域。僅供示範。

步驟 2：分析結果

匯總您從許多使用者收到的 autofillStatuses 物件，並分析資料中的趨勢。

首先，請查看自動填入功能的整體使用情形洞察資料：有多少百分比的使用者會使用瀏覽器自動填入功能填寫至少一個欄位？

接著，您可以深入瞭解個別欄位。舉例來說，您發現有相當一部分的使用者不會自動填入應支援自動填入功能的特定欄位。您現在可以調查可能的原因。

  • 欄位 <label> 是否不清楚？是否有任何提示或預留位置可能會造成誤解？
  • 您是否使用正確的語法設定 autocomplete 值？常見的問題是 <input autocomplete="first-name">，瀏覽器不會填入這個值，因為正確的值是 "given-name"。

結論

瞭解並善用自動填入功能，可改善網站上的使用者體驗。實作本指南所述的技術，即可取得寶貴的洞察資料，瞭解使用者如何與表單互動，並找出可改善之處。

請記住，自動填入功能是簡化使用者歷程的強大工具。為自動填入功能最佳化表單，可為訪客提供更友善的使用體驗。

查看所有自動填入資源。