เรียนรู้วิธี auto-focus ช่องกรอกข้อมูลแรกเมื่อโหลดหน้าในฟอร์ม HTML
หนึ่งในสมมติฐานพื้นฐานของ UX Design ที่ดีคือ ประหยัดขั้นตอนให้มากที่สุดจากจุด A ไป B เพื่อให้ผู้ใช้ได้สิ่งที่ต้องการ เร็ว
ไม่มีใครชอบกรอกฟอร์ม โดยเฉพาะฟอร์มยาวๆ มาช่วยประหยัดเวลาผู้ใช้เล็กน้อยโดย auto-focus ช่องกรอกแรกในฟอร์ม HTML เมื่อโหลดหน้า
HTML form
เพิ่มโค้ดฟอร์มนี้ในเอกสาร HTML ของคุณ:
<form> First name:<br> <input type="text" name="firstname" id="firstField"><br>Last name:<br> <input type="text" name="lastname"><br>Country:<br> <input type="text" name="lastname"> </form>JavaScript
เพิ่มฟังก์ชัน onload ของ JavaScript นี้ในไฟล์ .js ของคุณ:
window.onload = function() { document.getElementById("firstField").focus(); };สาธิต Auto-focus ช่องกรอกเมื่อโหลดหน้า
ดู демо ด้านล่าง:
https://codepen.io/StrengthandFreedom/pen/yLypogQ
วิธีการทำงานของโค้ด
ดู HTML form ID ในช่องกรอกแรกใน HTML form ชื่อ firstField — นี่คือสิ่งที่เราเป้าหมายด้วย JavaScript
ใน JavaScript เราตั้งค่า event onload ชื่อ window.onload ซึ่งรันทันทีเมื่อคุณไปหน้าใหม่หรือ refresh เบราว์เซอร์
Event onload execute ฟังก์ชันที่ค้นหาช่องกรอกที่มี ID firstField ผ่าน document.getElementById แล้วใช้เมธอด focus() ของ JavaScript ตั้งค่า state ของช่องกรอกเป็น focus
การแก้ไขปัญหา
Outline focus หายจากช่องกรอกของคุณอย่างกะทันหัน? เพราะโค้ดที่เราเขียน auto-focus ช่องกรอกแรก เพียงครั้งเดียว ต่อการโหลดหน้าแต่ละครั้ง หากคุณทำอะไรนอกเหนือจากการพิมพ์ทันทีในช่องกรอกที่ auto-focused แล้ว มันจะไม่ auto-focus อีก จนกว่าคุณจะ refresh หน้าใหม่
