ทีมเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome กำลังสร้างฟีเจอร์ใหม่เพิ่มเติมเพื่อช่วยคุณค้นหาปัญหาเกี่ยวกับแบบฟอร์มและแก้ไขข้อบกพร่องของฟีเจอร์ป้อนข้อความอัตโนมัติ
ใน Chrome Canary เรากำลังทดสอบฟีเจอร์ใหม่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่มีจุดประสงค์เพื่อช่วยให้นักพัฒนาซอฟต์แวร์เข้าใจวิธีการทำงานของฟีเจอร์ป้อนข้อความอัตโนมัติในแบบฟอร์ม และสาเหตุที่บางครั้งฟีเจอร์นี้ใช้งานไม่ได้
- ฟีเจอร์ป้อนข้อความอัตโนมัติของเบราว์เซอร์แมปค่าที่จัดเก็บไว้เพื่อสร้างฟิลด์อย่างไร
- การป้อนข้อความอัตโนมัติใช้เกณฑ์ใดในการกรอกข้อมูลในช่องแบบฟอร์ม
- ช่องใดที่ฟีเจอร์ป้อนข้อความอัตโนมัติไม่ได้กรอกข้อมูล
- Why does a form field not get filled by Autofill?
บทความนี้จะกล่าวถึงฟีเจอร์ใหม่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome รวมถึงอธิบายวิธีทดสอบและแสดงความคิดเห็น
ฟีเจอร์ป้อนข้อความอัตโนมัติคืออะไร
Chrome ช่วยให้ผู้ใช้จัดการที่อยู่ ข้อมูลการชำระเงิน และการเข้าสู่ระบบได้โดยจัดเก็บชุดข้อมูลอย่างปลอดภัยและเสนอให้กรอกข้อมูลในช่องแบบฟอร์มโดยไม่ต้องให้ผู้ใช้ป้อนข้อความ การดำเนินการนี้เรียกว่าการป้อนข้อความอัตโนมัติ
Chrome จะเสนอให้บันทึกข้อมูลการป้อนข้อความอัตโนมัติเมื่อคุณส่งแบบฟอร์ม ในอุปกรณ์เคลื่อนที่ ให้ทำดังนี้
จากนั้น Chrome จะเสนอให้ป้อนข้อมูลในแบบฟอร์มโดยอัตโนมัติด้วยข้อมูลที่บันทึกไว้
ในอุปกรณ์เคลื่อนที่ ให้ทำดังนี้
ในเดสก์ท็อป
คุณจัดการข้อมูลการป้อนข้อความอัตโนมัติได้ในการตั้งค่า Chrome
ในอุปกรณ์เคลื่อนที่ ให้ทำดังนี้
ในเดสก์ท็อป
นอกจากนี้ คุณอาจเห็นว่า Chrome แสดงคำแนะนำสำหรับช่องป้อนข้อมูลที่ไม่เกี่ยวข้องกับที่อยู่ บัตรเครดิต หรือข้อมูลเข้าสู่ระบบ นอกจากการเสนอการป้อนข้อความอัตโนมัติสำหรับ ชุด Structured Data เช่น ที่อยู่และรายละเอียดการชำระเงินแล้ว Chrome ยังช่วยให้ผู้ใช้ไม่ต้องป้อนข้อมูลในช่องแบบฟอร์มรายการเดียวที่การป้อนข้อความอัตโนมัติไม่สามารถดำเนินการได้ เมื่อแบบฟอร์มมีฟิลด์ที่มีแอตทริบิวต์ชื่อซึ่ง Chrome เคยพบมาก่อน Chrome จะแนะนำค่าเพื่อให้คุณไม่ต้องป้อนข้อมูลอีกครั้ง
ตัวอย่างง่ายๆ มีดังนี้
เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome แสดงให้เห็นว่าช่องแบบฟอร์มที่นี่ไม่มีแอตทริบิวต์ที่มีความหมายต่อเบราว์เซอร์ แต่เป็นเพียงแอตทริบิวต์ name ของ n300
ช่องไม่สอดคล้องกับค่าในชุด Structured Data ที่จะทำให้เหมาะสมกับการป้อนข้อความอัตโนมัติของ Chrome แต่ Chrome จะยังคงช่วยเหลือผู้ใช้ได้หากพบช่องที่มีชื่อนี้ในอนาคต
ทดสอบฟีเจอร์ป้อนข้อความอัตโนมัติใหม่ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
Chrome กำลังทดสอบความสามารถใหม่ๆ สำหรับแผงปัญหาของเครื่องมือสำหรับนักพัฒนาเว็บ เพื่อช่วยแก้ไขข้อบกพร่องของฟีเจอร์ป้อนข้อความอัตโนมัติ
คุณลองใช้ความสามารถใหม่ๆ เหล่านี้ได้ใน Chrome Canary เลือก
การตั้งค่า > การทดสอบ > 
ไฮไลต์โหนดหรือแอตทริบิวต์ที่ละเมิดในต้นไม้ DOM ของแผงองค์ประกอบใน DevTools และโหลด DevTools ซ้ำเมื่อได้รับข้อความแจ้ง
หรือจะเรียกใช้ Chrome Canary จากบรรทัดคำสั่งด้วยแฟล็ก AutofillEnableDevtoolsIssues ก็ได้ โดยทำดังนี้
- Windows:
shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues - Mac:
shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
หากต้องการตรวจสอบปัญหา ให้เปิดแผงปัญหาของเครื่องมือสำหรับนักพัฒนาเว็บในหน้าที่มีแบบฟอร์ม form-problems.glitch.me เป็นจุดเริ่มต้นที่ดี
อย่างที่คุณเห็น แบบฟอร์มนี้ยุ่งเหยิงมาก โดยจะมีข้อมูลต่อไปนี้
- ช่องป้อนข้อมูลที่ไม่มีแอตทริบิวต์
idหรือname - องค์ประกอบที่มีรหัสซ้ำ
<label>มีแอตทริบิวต์forที่ไม่ตรงกับรหัสองค์ประกอบ- ช่องที่มีแอตทริบิวต์
autocompleteว่างเปล่า
วางเมาส์เหนือองค์ประกอบที่ไฮไลต์ในแผนภูมิ DOM แล้วคลิกดูปัญหาเพื่อดูข้อมูลเพิ่มเติม
คลิกโหนดที่ละเมิดเพื่อดูทรัพยากรที่ได้รับผลกระทบสำหรับปัญหาแต่ละรายการ แบบฟอร์มนี้มีป้ายกำกับ 8 รายการที่มีแอตทริบิวต์ for ที่ไม่ตรงกับ id ของช่องแบบฟอร์ม
ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อปรับปรุงการช่วยเหลือพิเศษของแบบฟอร์ม
เครื่องมือสำหรับนักพัฒนาเว็บยังไฮไลต์ปัญหาการช่วยเหลือพิเศษสำหรับการป้อนข้อความอัตโนมัติได้ด้วย เช่น ช่องแบบฟอร์มที่ไม่มีแอตทริบิวต์ aria-labelledby หรือ <label> ที่เชื่อมโยง
ในตัวอย่างนี้ องค์ประกอบ <input> มีป้ายกำกับที่ตรงกัน ซึ่งหมายความว่าอุปกรณ์ช่วยเหลือจะประกาศวัตถุประสงค์ขององค์ประกอบได้ อย่างไรก็ตาม ในตัวอย่างต่อไปนี้ ระบบไม่พบป้ายกำกับหรือแอตทริบิวต์ aria-labelledby ที่ตรงกัน
แสดงความคิดเห็นเกี่ยวกับฟีเจอร์ป้อนข้อความอัตโนมัติใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์และการเปลี่ยนแปลงใหม่ๆ ในโพสต์ หรือเรื่องอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่านข้อบกพร่องแบบรวมใน crbug.com
- รายงานปัญหาจากเครื่องมือสำหรับนักพัฒนาเว็บ: ตัวเลือกเพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ทวีตถึง @ChromeDevTools
ดูข้อมูลเพิ่มเติม
- ดูข้อมูลเกี่ยวกับแบบฟอร์ม: หลักสูตรเกี่ยวกับแบบฟอร์ม HTML เพื่อช่วยให้คุณมีความเชี่ยวชาญมากขึ้นในฐานะนักพัฒนาเว็บ เหมาะสำหรับผู้ที่เพิ่งเริ่มใช้แบบฟอร์มและการป้อนข้อความอัตโนมัติ
- web.dev/tags/forms: คำแนะนำ แนวทางปฏิบัติแนะนำ และโค้ดแล็บสําหรับแบบฟอร์มการชําระเงิน เข้าสู่ระบบ และที่อยู่