ทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome กำลังสร้างฟีเจอร์ใหม่เพิ่มเติมเพื่อช่วยคุณค้นหาปัญหาเกี่ยวกับแบบฟอร์มและแก้ไขข้อบกพร่องของการป้อนข้อความอัตโนมัติ
ใน Chrome Canary เรากำลังทดสอบฟีเจอร์ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อช่วยให้นักพัฒนาซอฟต์แวร์เข้าใจวิธีการทำงานของการป้อนข้อมูลแบบฟอร์มอัตโนมัติ และสาเหตุที่ทำงานไม่สำเร็จในบางครั้ง
- ฟีเจอร์ป้อนข้อความอัตโนมัติของเบราว์เซอร์จะแมปค่าที่เก็บไว้กับช่องในแบบฟอร์มอย่างไร
- การป้อนข้อความอัตโนมัติใช้เกณฑ์อะไรในการกรอกข้อมูลในช่องของแบบฟอร์ม
- ช่องใดที่ไม่ได้รับการป้อนข้อมูลด้วยการป้อนข้อความอัตโนมัติ
- เหตุใดฟิลด์ในแบบฟอร์มจึงไม่ได้รับการกรอกข้อมูลด้วยการป้อนข้อความอัตโนมัติ
บทความนี้จะอธิบายถึงฟีเจอร์ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome รวมถึงอธิบายวิธีทดสอบฟีเจอร์ดังกล่าว รวมถึงแสดงความคิดเห็น
การป้อนข้อความอัตโนมัติคืออะไร
Chrome ช่วยให้ผู้ใช้จัดการที่อยู่ การชำระเงิน และข้อมูลการเข้าสู่ระบบด้วยการจัดเก็บชุดข้อมูลอย่างปลอดภัยและเสนอให้กรอกข้อมูลในช่องของแบบฟอร์มโดยที่ผู้ใช้ไม่จำเป็นต้องป้อนข้อความ หรือที่เรียกว่า การป้อนข้อความอัตโนมัติ
Chrome เสนอให้บันทึกข้อมูลการป้อนข้อความอัตโนมัติเมื่อคุณส่งแบบฟอร์ม ในอุปกรณ์เคลื่อนที่ ให้ทำดังนี้
จากนั้น Chrome จะเสนอที่จะป้อนข้อมูลที่บันทึกไว้ลงในแบบฟอร์มโดยอัตโนมัติ
ในอุปกรณ์เคลื่อนที่ ให้ทำดังนี้
ในเดสก์ท็อป
คุณจัดการข้อมูลการป้อนข้อความอัตโนมัติได้ในการตั้งค่า Chrome
ในอุปกรณ์เคลื่อนที่ ให้ทำดังนี้
ในเดสก์ท็อป
นอกจากนี้ คุณยังอาจเห็น Chrome เสนอคำแนะนำเกี่ยวกับช่องป้อนข้อมูลที่ไม่เกี่ยวข้องกับที่อยู่ บัตรเครดิต หรือข้อมูลการเข้าสู่ระบบอีกด้วย นอกจากการให้บริการการป้อนข้อความอัตโนมัติสำหรับชุดข้อมูลที่มีโครงสร้าง เช่น ที่อยู่และรายละเอียดการชำระเงินแล้ว Chrome ยังช่วยให้ผู้ใช้ไม่ต้องป้อนข้อมูลซ้ำสำหรับช่องแบบฟอร์มเดียวที่การป้อนข้อความอัตโนมัติจัดการไม่ได้ เมื่อแบบฟอร์มมีช่องที่มีแอตทริบิวต์ชื่อที่ Chrome เคยพบมาก่อน Chrome สามารถแนะนำค่าให้คุณไม่ต้องป้อนข้อมูลอีกครั้ง
ต่อไปนี้เป็นตัวอย่างง่ายๆ
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงให้เห็นว่าช่องแบบฟอร์มที่นี่ไม่มีแอตทริบิวต์ที่มีผลกับเบราว์เซอร์ แต่เป็นเพียงแอตทริบิวต์ name ของ n300
ช่องไม่สอดคล้องกับค่าในชุดข้อมูลที่มีโครงสร้างซึ่งจะเหมาะกับการป้อนข้อความอัตโนมัติของ Chrome แต่ Chrome จะยังช่วยผู้ใช้ได้หากพบช่องที่ใช้ชื่อนี้ในอนาคต
ทดสอบฟีเจอร์ป้อนข้อความอัตโนมัติของ Chrome DevTools
Chrome กำลังทดสอบความสามารถใหม่สำหรับแผงปัญหาของเครื่องมือสำหรับนักพัฒนาเว็บ เพื่อช่วยแก้ไขข้อบกพร่องของฟีเจอร์ป้อนข้อความอัตโนมัติ
คุณลองใช้ความสามารถใหม่ๆ เหล่านี้ได้ใน Chrome Canary ทำเครื่องหมายที่ 
การตั้งค่า > การทดสอบ > 
ไฮไลต์โหนดหรือแอตทริบิวต์ที่ละเมิดในแผนผัง DOM ของแผงองค์ประกอบในเครื่องมือสำหรับนักพัฒนาเว็บ และโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำเมื่อได้รับข้อความแจ้ง
หรือจะเรียกใช้ 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: คำแนะนำ แนวทางปฏิบัติแนะนำ และ Codelab สำหรับแบบฟอร์มการชำระเงิน การเข้าสู่ระบบ และที่อยู่