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

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

ไวยากรณ์ (Syntax)

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

rangeObject.autofocus = true|false

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

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

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ autofocus ของ Input Range</h1>
<form>
  <input type="range" id="RANGE1" name="VOL" autofocus>
</form>
<br>
<button type="button" onclick="rangeFocus()">ตรวจสอบ</button>
<p id="Sample"></p>
<script>
  function rangeFocus() {
    var R = document.getElementById("RANGE1").autofocus;
    document.getElementById("Sample").innerHTML = "คุณสมบัติ autofocus ตั้งค่าเป็น: " + R;
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: Slider มี autofocus attribute — จะได้รับโฟกัสทันทีเมื่อโหลดหน้า (อาจเห็น outline หรือสามารถใช้ลูกศรคีย์บอร์ดควบคุมได้ทันที)

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

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

• Slider มี autofocus attribute (boolean attribute — ไม่ต้องมีค่า)
• ปุ่ม "ตรวจสอบ" เรียก rangeFocus()
• ดึงค่า .autofocus property (คืนค่า true/false)

หมายเหตุ: ในหน้าเว็บควรมีเพียงหนึ่ง element ที่มี autofocus เท่านั้น หากมีหลายตัว เบราว์เซอร์จะโฟกัสตัวแรกที่พบ