คุณสมบัติ autofocus ของ Button
คุณสมบัติ autofocus ที่เกี่ยวข้องกับแอตทริบิวต์ autofocus ของอิลิเมนต์ <button> ใช้ระบุว่าปุ่มในเอกสาร HTML ควรได้รับ focus อัตโนมัติเมื่อโหลดหน้าเว็บหรือไม่
ไวยากรณ์ (Syntax)
การกำหนดค่า autofocus
buttonObject.autofocus = true|false
ค่า:
- true - ปุ่มได้รับ focus เมื่อโหลดหน้า
- false - ปุ่มไม่ได้รับ focus เมื่อโหลดหน้า
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการตรวจสอบว่า autofocus ทำงานหรือไม่
<!DOCTYPE html>
<html>
<body>
<button type="button" id="MyButton" autofocus>BUTTON</button>
<p>Click the below button to know if the input button above automatically gets the focus on page load or not</p>
<button onclick="buttonFocus()">CLICK IT</button>
<p id="Sample"></p>
<script>
function buttonFocus() {
var x = document.getElementById("MyButton").autofocus;
if (x == true)
document.getElementById("Sample").innerHTML = "The input button does get focus on page load";
else
document.getElementById("Sample").innerHTML = "The input button does not get focus on page load";
}
</script>
</body>
</html>
ผลลัพธ์
เริ่มต้น: ปุ่ม BUTTON มี autofocus (อาจได้ focus อัตโนมัติ)
คลิก CLICK IT: ตรวจสอบค่า autofocus แสดงผลว่ามี focus หรือไม่
คำอธิบายเพิ่มเติม
autofocusเป็น boolean attribute - มีอยู่ = true, ไม่มี = false- มีได้สูงสุด 1 element ต่อหน้าที่มี autofocus (element แรกที่มี attribute นี้)
- ทำงานกับ:
<button>,<input>,<select>,<textarea>,<a>(ถ้าเป็น focusable) - ใช้เพื่อ UX: ให้ผู้ใช้พิมพ์/โต้ตอบได้ทันทีโดยไม่ต้องคลิก/Tab ก่อน
- ควรใช้謹慎 - อาจรบกวน screen readers หรือผู้ใช้คีย์บอร์ดที่คาดหวัง focus เริ่มต้นที่ต้นหน้า
- เข้าถึง element ที่มี focus อยู่:
document.activeElement
