HTML DOM Input รีเซ็ตคุณสมบัติออโต้โฟกัส

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

ไวยากรณ์

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

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

resetObject.autofocus = true|false

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

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1> Reset Autofocus property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1" autofocus>
</form>
<p>Get the reset button autofocus property value by clicking the below button</p>
<button type="button()" onclick="FocusVal()">CHECK</button>
<p id="Sample"></p>
<script>
   function FocusVal(){
      var f = document.getElementById("RESET1").autofocus;
      document.getElementById("Sample").innerHTML = "The reset button autofocus property is set to: "+f;
   }
</script>
</body>
</html>

ผลลัพธ์

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

HTML DOM Input รีเซ็ตคุณสมบัติออโต้โฟกัส

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

HTML DOM Input รีเซ็ตคุณสมบัติออโต้โฟกัส

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

เราได้สร้าง องค์ประกอบที่มี type=”reset”, id=”RESET1” การคลิกที่ปุ่มนี้จะรีเซ็ตข้อมูลในแบบฟอร์ม ปุ่มนี้อยู่ในแบบฟอร์มที่มีช่องข้อความสองช่องด้วย และแบบฟอร์มยังมีรูปแบบอินไลน์ที่ใช้กับปุ่มนี้ด้วย -

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>

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

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

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

function FocusVal(){
   var f = document.getElementById("RESET1").autofocus;
   document.getElementById("Sample").innerHTML = "The reset button autofocus property is set to: "+f;
}