กิจกรรมการป้อนข้อความอัตโนมัติอยู่ในช่วงทดลองใช้จากต้นทาง

Jeremy Wagner

เผยแพร่: 10 มิถุนายน 2026

แบบฟอร์มเป็นจุดโต้ตอบที่พบบ่อยบนเว็บ แต่ก็เป็นสาเหตุที่ทำให้ผู้ใช้รู้สึกไม่สะดวกอยู่พอสมควร เบราว์เซอร์มีฟีเจอร์ป้อนข้อความอัตโนมัติ มานานแล้วเพื่อลดความยุ่งยากนี้ โดยช่วยให้ผู้ใช้ไม่ต้องทำซ้ำๆ เช่น การป้อนหมายเลขบัตรเครดิต ที่อยู่ และข้อมูลเข้าสู่ระบบ

สำหรับนักพัฒนาแอป การจัดการการป้อนข้อความอัตโนมัติในแบบฟอร์มเป็นเรื่องที่ท้าทาย แม้ว่านักพัฒนาซอฟต์แวร์จะ ฟังเหตุการณ์ input หรือ change ในองค์ประกอบ <form> ได้ แต่เหตุการณ์เหล่านี้ไม่ได้ บอกวิธีที่ข้อมูลมาถึงฟิลด์ ความไม่ชัดเจนนี้ทำให้ เรียกใช้ตรรกะที่เฉพาะเจาะจงได้ยาก เช่น การปรับเลย์เอาต์ ณ ช่วงเวลาที่ระบบป้อนข้อมูลในแบบฟอร์มโดยอัตโนมัติ autofill เหตุการณ์ใหม่พร้อมใช้งานแล้วในรูปแบบช่วงทดลองใช้จากต้นทางของ Chrome

ตั้งแต่ Chrome 147 เป็นต้นไป จะเป็นสัญญาณที่มีประโยชน์สำหรับนักพัฒนาซอฟต์แวร์เมื่อเบราว์เซอร์ ช่วยผู้ใช้ในการป้อนข้อความอัตโนมัติ

autofill: แก้ปัญหาที่ input และ change ทำไม่ได้

เหตุการณ์ input และ change เป็นสัญญาณทั่วไปที่ไม่ได้แยกความแตกต่าง ระหว่างผู้ใช้ที่กรอกช่องแบบฟอร์มด้วยตนเองกับเมื่อใช้การป้อนข้อความอัตโนมัติ การไม่มีเหตุการณ์เฉพาะสำหรับการป้อนแบบฟอร์มอัตโนมัติทําให้นักพัฒนาแอปทําการอัปเดต UI ที่เป็นประโยชน์เมื่อกรอกแบบฟอร์มได้อย่างยากขึ้น เช่น ผู้ใช้ระบุประเทศที่พำนักอาศัย จากนั้นช่องที่อยู่ใกล้เคียงจะปรากฏขึ้นเพื่อระบุรัฐหรือเขตที่ผู้ใช้อาศัยอยู่ ซึ่งจะแตกต่างกันไปตามประเทศ การทริกเกอร์การอัปเดตนี้เพื่อตอบสนองต่อคำขอป้อนข้อความอัตโนมัติจะช่วยให้นักพัฒนาแอปคาดการณ์ได้มากขึ้นและมีประโยชน์สำหรับผู้ใช้ เหตุการณ์ autofill ช่วยแก้ปัญหานี้ได้

autofill เหตุการณ์จะทํางานก่อนที่เบราว์เซอร์จะป้อนแบบฟอร์มโดยอัตโนมัติ Listener สำหรับเหตุการณ์จะได้รับอาร์เรย์ของ autofillValues ที่ต้องกรอกและฟังก์ชัน refill Listener สามารถเรียกใช้ฟังก์ชัน refill เพื่อขอให้เบราว์เซอร์ กรอกแบบฟอร์มอีกครั้งได้ เช่น หาก Listener เปลี่ยนเนื้อหา ลองดูมาร์กอัปแบบฟอร์มตัวอย่างนี้

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

ตัวอย่างนี้เป็นแบบฟอร์มที่อยู่ทั่วไป ผู้ใช้สามารถคลิกหรือแตะในช่องแบบฟอร์ม เพื่อทริกเกอร์เคล็ดลับเครื่องมือเติมข้อความอัตโนมัติ เมื่อเลือกที่อยู่ที่ป้อนข้อความให้อัตโนมัติ ระบบจะดำเนินการต่อไปนี้

1. ตัวแฮนเดิลเหตุการณ์ autofill จะทำงานก่อนช่องแบบฟอร์มจะ ป้อนข้อความอัตโนมัติ
2. event.autofillValues จะระบุข้อมูลการป้อนข้อความอัตโนมัติที่เสนอในออบเจ็กต์ที่มี พร็อพเพอร์ตี้ 2 รายการ
   • field: การอ้างอิงถึงองค์ประกอบ DOM ที่จะป้อนอัตโนมัติ
   • value: ค่าการป้อนข้อความอัตโนมัติที่เสนอสำหรับช่อง
3. เมื่อตรวจพบชื่อฟิลด์ประเทศ ตรรกะจะตรวจหาประเทศ (เยอรมนีในตัวอย่างนี้) และป้อนข้อมูลเมนูแบบเลื่อนลงของรัฐด้วยตัวเลือกที่เหมาะสมสำหรับประเทศนั้น
4. event.refill() จะเรียกใช้เพื่อสั่งให้เบราว์เซอร์กรอกแบบฟอร์มอีกครั้ง ซึ่ง จะทำซ้ำการดำเนินการป้อนข้อความอัตโนมัติในแบบฟอร์มที่เปลี่ยนแปลง

หากสนใจautofillกรณีการใช้งานที่ซับซ้อนยิ่งขึ้น Yoav Weiss จาก Shopify ได้สร้างการสาธิต 2 รายการดังนี้

1. แบบฟอร์มข้อมูลส่วนตัว ซึ่งคล้ายกับตัวอย่างในโพสต์นี้ แต่มีรายละเอียดมากกว่าการสาธิตพื้นฐานของautofillกิจกรรม
2. การสาธิตการป้อนข้อความอัตโนมัติของบัตรเครดิต ซึ่งใช้เหตุการณ์ autofill เพื่อตรวจหาผู้ออกบัตรและอัปเดต DOM อย่างมากด้วยภาพที่สมบูรณ์

การสาธิตการป้อนข้อความอัตโนมัติของบัตรเครดิตแสดงให้เห็นถึงความสามารถของautofill แม้ว่าประสบการณ์ประเภทนี้จะเกิดขึ้นได้ก่อนautofill เหตุการณ์ แต่การมีเหตุการณ์เฉพาะสำหรับการป้อนข้อความอัตโนมัติในแบบฟอร์มจะช่วยให้autofillนักพัฒนาแอปได้รับประสบการณ์ที่ดีขึ้น

เหตุการณ์ autofill และคลาสเสมือน CSS :autofill

: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 และพร็อพเพอร์ตี้ CSS field-sizing

หากfield-sizing CSS property มีค่าเป็น 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

ตรวจหาและวัดการป้อนข้อความอัตโนมัติในแบบฟอร์ม

ข้อมูล Analytics ของการป้อนข้อความอัตโนมัติในแบบฟอร์มมีประโยชน์ต่อธุรกิจ แต่การวัดผลการป้อนข้อความอัตโนมัติในแบบฟอร์มทำได้ยากด้วยฟีเจอร์เว็บที่มีอยู่ ตัวอย่างเช่น แนวทางปฏิบัติคือการใช้คลาสเสมือน :autofill ของ CSS ซึ่งไม่ใช่ Baseline

autofill event เป็นเครื่องมือในการตรวจหาการป้อนข้อความอัตโนมัติในแบบฟอร์ม เนื่องจากเหตุการณ์จะทริกเกอร์ เฉพาะเมื่อมีการพยายามป้อนข้อความอัตโนมัติจริงเท่านั้น ไม่ใช่เมื่อมีการป้อนข้อมูลใดๆ และพร็อพเพอร์ตี้ 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 ทำงานได้ดียิ่งขึ้น Origin Trial ช่วยให้คุณทดสอบฟีเจอร์ทดลองกับผู้ใช้จริงและให้ความคิดเห็นแก่ทีม Chrome ก่อนที่ API จะกลายเป็นส่วนหนึ่งของแพลตฟอร์มเว็บ

หากต้องการเริ่มใช้autofillเหตุการณ์ในเว็บไซต์ ให้ลงทะเบียนเพื่อทดลองใช้ Origin ที่นี่ Chrome หวังว่าจะได้เห็นวิธีที่คุณใช้ฟีเจอร์นี้ และ วิธีดังกล่าวจะช่วยให้เราพบโอกาสในการปรับปรุงได้อย่างไร