คุณสมบัติการโฟกัสอัตโนมัติช่วงอินพุต HTML DOM

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

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติออโต้โฟกัส -

rangeObject.autofocus = true|false

ในที่นี้ ค่า true แทนตัวเลื่อนช่วงควรได้รับการโฟกัส และค่าที่ผิดพลาดจะแสดงเป็นอย่างอื่น มันถูกตั้งค่าเป็นเท็จโดยค่าเริ่มต้น

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติออโต้โฟกัสช่วงอินพุต -

<!DOCTYPE html>
<html>
<body>
<h1>Input range autofocus property</h1>
<form>
<input type="range" id="RANGE1" name="VOL" autofocus>
</form>
<br>
<button type=”button” onclick="rangeFocus()">CHECK</button>
<p id="Sample"></p>
<script>
   function rangeFocus() {
      var R = document.getElementById("RANGE1").autofocus;
      document.getElementById("Sample").innerHTML = "The autofocus property is set to: "+R;
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

คุณสมบัติการโฟกัสอัตโนมัติช่วงอินพุต HTML DOM

เมื่อคลิกปุ่มตรวจสอบ -

คุณสมบัติการโฟกัสอัตโนมัติช่วงอินพุต HTML DOM

ในตัวอย่างข้างต้น −

เราได้สร้างช่องใส่ข้อมูลที่อยู่ภายในแบบฟอร์มที่มี type=“range” , id=“RANGE1” ,name=“VOL” และมีคุณสมบัติออโต้โฟกัสที่เปิดใช้งานเช่นตั้งค่าเป็นจริง

<form>
<input type="range" id="RANGE1" name="VOL" autofocus>
</form>

จากนั้นเราได้สร้างปุ่ม CHECK ที่จะรันเมธอด rangeFocus() เมื่อผู้ใช้คลิก -

<button type=”button” onclick="rangeFocus()">CHECK</button>

เมธอด rangeFocus() รับองค์ประกอบอินพุตที่มีช่วงประเภทโดยใช้เมธอด getElementById() และรับคุณสมบัติออโต้โฟกัส คุณสมบัติออโต้โฟกัสคืนค่าจริงและเท็จขึ้นอยู่กับค่าแอตทริบิวต์การโฟกัสอัตโนมัติของตัวเลื่อนช่วง ค่านี้ถูกกำหนดให้กับตัวแปร R และแสดงในย่อหน้าด้วยรหัส "ตัวอย่าง" โดยใช้คุณสมบัติ innerHTML -

function rangeFocus() {
   var R = document.getElementById("RANGE1").autofocus;
   document.getElementById("Sample").innerHTML = "The autofocus property is set to: "+R;
}