มาทำให้ Browser ช่วยกรอก form ด้วย Auto fill form เนียนๆกันเถอะ

บางคนอาจจะเจอเรื่องปวดหัว ที่บางเว็บไซต์ไม่ Support Auto fill form ดีๆซักทีซึ่งในความเป็นจริงมันไม่ได้ทำยากขนาดนั้นนะครับที่จะให้ Browser รู้จัก Form ของเรา และไม่ใช่ว่าทำ Form ยังไงก็ได้เดี๋ยว Browser มันจะรู้จักเองนะครับ มีมีวิธีการของมันอยู่

ใส่ Auto Complete

จริงๆวิธีง่ายมากๆครับ ก็คือตรง tag input ของเรา ให้ใส่ attibute ที่ชื่อว่า autocomplete ไปด้วย โดยค่าใน auto complete จะเป็นตัวบอกว่าช่องนี้คืออะไร แบบนี้

<input type="text" name="name" autocomplete="name">

ค่าที่ใส่ใน attibute autocomplete เราจะเรียกว่า token โดย token จะแบ่งออกเป็น หลายอันมากๆ ซึ่งบางอัน บาง Browser ก็ไม่ support โดยในแต่ละ Token จะกำหนดชัดเจนว่า form ต้องเป็น Type อะไรอย่างเช่น cc-number ต้องเป็นเลขยาวๆ 16 หลัก จะทำเป็นช่อง 4 ช่องแบบข้างล่างไม่ได้

ใช้ได้ที่ไหนบ้าง?

เท่าที่ลองเทสดูในทุกๆ Browser เหมือน Firefox จะทำงานไม่สมบูรณ์เท่าไหร่สำหรับ Feature นี้ ส่วน Browser อื่นๆไม่ว่าจะเป็น Chrome , Edge , Safari ล้วนใช้งานได้ตามปกติ

วัดผลยังไงว่ามันใช้ได้ผล

เราสามารถวัดผลได้ว่า Auto fill มันช่วย fill form ให้ user ไปเยอะมั้ยด้วยการ Track event ของ element ที่มี selector นี้ input:-webkit-autofill โดยถามเอาง่ายๆเลยก็ เขียน code ตามนี้เพื่อ Track ดู

document.addEventListener('input', function(e) {
var element = e.target.matches(':-webkit-autofill');
if(element) {
// Field auto-completed - Send an analytics event (or whatnot)
}
});

เนื่องจากว่า Token ที่ใช้ได้มันยาวมากๆ ก็เลยเอามาไว้ตรงข้างล่างสุด ลองมาดูกันครับว่า ใน attibute autocomplete เราใส่อะไรไปได้บ้าง อยากให้ลองเอาไปปรับดูกันครับ User จะได้ใช้งานง่ายขึ้น

Show your support

Clapping shows how much you appreciated warat wongmaneekit’s story.