คุณสมบัติออโต้โฟกัสวิทยุอินพุต HTML DOM

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

ไวยากรณ์

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

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

radioObject.autofocus = true|false

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

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input password autofocus property</h1>
<form>
RADIO: <input type="radio" id="rad1" name=”BTN” autofocus>
</form>
<br><br>
<button type=”button” onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
   function FocusVal() {
      var R = document.getElementById("rad1").autofocus;
      document.getElementById("Sample").innerHTML = "The radio button has autofocus property
      set to "+R;
   }
</script>
</body>
</html>

ผลลัพธ์

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

คุณสมบัติออโต้โฟกัสวิทยุอินพุต HTML DOM

เมื่อคลิกปุ่มตรวจสอบโฟกัส −

คุณสมบัติออโต้โฟกัสวิทยุอินพุต HTML DOM

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

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

Password: <input type="password" id="rad1" name=”BTN”autofocus>

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

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

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

function FocusVal() {
   var R = document.getElementById("rad1").autofocus;
   document.getElementById("Sample").innerHTML = "The radio button has autofocus property set to "+R;
}