คุณสมบัติการรีเซ็ตอินพุต HTML DOM ถูกปิดใช้งาน

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

ไวยากรณ์

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

การตั้งค่าคุณสมบัติปิดการใช้งาน -

resetObject.autofocus = true|false

ที่นี่ ปุ่ม true=reset ถูกปิดใช้งาน และ false=ปุ่มรีเซ็ตไม่ถูกปิดใช้งาน เป็นเท็จโดยค่าเริ่มต้น

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input reset disabled 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">
</form>
<p>Disable the above reset button by clicking on the DISABLE button</p>
<button type="button" onclick="disableReset()">DISABLE</button>
<p id="Sample"></p>
<script>
   function disableReset() {
      document.getElementById("RESET1").disabled=true;
      document.getElementById("Sample").innerHTML = "The reset button is now disabled" ;
   }
</script>
</body>
</html>

ผลลัพธ์

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

คุณสมบัติการรีเซ็ตอินพุต HTML DOM ถูกปิดใช้งาน

เมื่อคลิกปุ่มปิดการใช้งาน -

คุณสมบัติการรีเซ็ตอินพุต HTML DOM ถูกปิดใช้งาน

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

เราได้สร้าง องค์ประกอบที่มี 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>

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

<button type="button" onclick="disableReset()">DISABLE</button>

เมธอด disableReset() รับองค์ประกอบอินพุตพร้อมการรีเซ็ตประเภทโดยใช้เมธอด getElementById() และตั้งค่าคุณสมบัติที่ปิดใช้งานเป็นจริง ทำให้ไม่สามารถคลิกปุ่มรีเซ็ตได้ และผู้ใช้จะไม่สามารถโต้ตอบกับปุ่มนี้ได้อีกต่อไป ตอนนี้กลายเป็นสีเทา -

function disableReset() {
   document.getElementById("RESET1").disabled=true;
   document.getElementById("Sample").innerHTML = "The reset button is now disabled" ;
}