ปิดใช้งานการค้นหาอินพุต HTML DOM พร็อพเพอร์ตี้

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

ไวยากรณ์

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

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

searchObject.autofocus = true|false

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

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input search disabled Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
<form>
<p>Disable the above search field by clicking on the DISABLE button</p>
<button type="button" onclick="disableSearch()">DISABLE</button>
<p id="Sample"></p>
<script>
   function disableSearch() {
      document.getElementById("SEARCH1").disabled=true;
      document.getElementById("Sample").innerHTML = "The search field is now disabled" ;
   }
</script>
</body>
</html>

ผลลัพธ์

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

ปิดใช้งานการค้นหาอินพุต HTML DOM พร็อพเพอร์ตี้

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

ปิดใช้งานการค้นหาอินพุต HTML DOM พร็อพเพอร์ตี้

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

เราได้สร้าง องค์ประกอบที่มี type=”search”, id=”SEARCH1” และ name=”fruits” ช่องค้นหาอยู่ในรูปแบบ −

<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
<form>

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

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

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

function disableSearch() {
   document.getElementById("SEARCH1").disabled=true;
   document.getElementById("Sample").innerHTML = "The search field is now disabled" ;
}