วิธีโฟกัสฟิลด์ป้อนแบบฟอร์มแรกโดยอัตโนมัติด้วย JavaScript วานิลลา

เรียนรู้วิธีโฟกัสอัตโนมัติที่ช่องป้อนข้อมูลแรกเมื่อโหลดหน้าเว็บในรูปแบบ HTML

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

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

แบบฟอร์ม HTML

เพิ่มโค้ดแบบฟอร์มนี้ในเอกสาร 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();
};

ช่องป้อนโฟกัสอัตโนมัติในการสาธิตการโหลดหน้าเว็บ

ตรวจสอบการสาธิตด้านล่าง:

https://codepen.io/StrengthandFreedom/pen/yLypogQ

วิธีการทำงานของโค้ด

ลองดูที่แบบฟอร์ม HTML รหัสในช่องป้อนข้อมูลแรกในรูปแบบ HTML เรียกว่า firstField — นี่คือสิ่งที่เรากำหนดเป้าหมายด้วย JavaScript

ใน JavaScript เราตั้งค่าเหตุการณ์ onload ชื่อ window.onload ซึ่งทำงานทันทีเมื่อคุณไปที่หน้าใหม่หรือรีเฟรชเบราว์เซอร์ของคุณ

เหตุการณ์ onload เรียกใช้ฟังก์ชันที่ค้นหาฟิลด์อินพุตด้วย firstField ID ผ่าน document.getElementById แล้วใช้ JavaScript focus() วิธีการตั้งค่า state ของช่องป้อนข้อมูลที่จะโฟกัส

การแก้ไขปัญหา

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