คุณสมบัติ HTML DOM Input Reset autofocus

คุณสมบัติ autofocus ของ input type="reset" เกี่ยวข้องกับแอตทริบิวต์ autofocus ใช้ตั้งค่าหรือดึงค่า ว่าปุ่ม reset ควรได้รับโฟกัสอัตโนมัติเมื่อโหลดหน้าเว็บหรือไม่

ไวยากรณ์ (Syntax)

การตั้งค่า autofocus:

resetObject.autofocus = true|false

• true — ปุ่ม reset ได้รับโฟกัสเมื่อโหลดหน้า
• false — ไม่ได้รับโฟกัสอัตโนมัติ (ค่าเริ่มต้น)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ autofocus ของ Reset</h1>
<form style="border:solid 2px green;padding:2px">
  ชื่อผู้ใช้: <input type="text" id="USR"><br>
  ที่ตั้ง: <input type="text" id="Age"><br><br>
  <input type="reset" id="RESET1" autofocus>
</form>
<p>คลิกปุ่มเพื่อตรวจสอบค่า autofocus ของปุ่ม reset</p>
<button type="button" onclick="FocusVal()">ตรวจสอบ</button>
<p id="Sample"></p>
<script>
  function FocusVal() {
    var f = document.getElementById("RESET1").autofocus;
    document.getElementById("Sample").innerHTML = "คุณสมบัติ autofocus ของปุ่ม reset ตั้งค่าเป็น: " + f;
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: ปุ่ม Reset มี autofocus attribute — จะได้รับโฟกัสทันทีเมื่อโหลดหน้า

คลิก "ตรวจสอบ": แสดง "คุณสมบัติ autofocus ของปุ่ม reset ตั้งค่าเป็น: true"

คำอธิบายโค้ด

• ปุ่ม Reset: type="reset", id="RESET1", autofocus
• อยู่ในฟอร์มพร้อมช่องข้อความ 2 ช่อง
• ปุ่ม "ตรวจสอบ" เรียก FocusVal() ดึงค่า .autofocus

หมายเหตุ: ตัวอย่างต้นฉบับมี onclick="FocusVal()" เขียนผิดเป็น onclick="button()" — ได้แก้ไขแล้ว

ข้อควรระวัง: การให้ autofocus กับปุ่ม reset อาจทำให้ผู้ใช้กด reset โดยไม่ตั้งใจ (เช่น กด Space/Enter) ควรใช้謹慎