คุณสมบัติ disabled ของ HTML DOM Input Search

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

ไวยากรณ์

ไวยากรณ์สำหรับการตั้งค่าคุณสมบัติ disabled:

searchObject.autofocus = true|false

ที่นี่ true=ช่องค้นหาถูกปิดใช้งาน false=ช่องค้นหาไม่ถูกปิดใช้งาน ค่าเริ่มต้นคือ false

ตัวอย่าง

มาดูตัวอย่างสำหรับคุณสมบัติ disabled ของ Input Search:

<!DOCTYPE html> <html> <body> <h1>Input search disabled Property</h1> <form> FRUITS: <input type="search" id="SEARCH1" name="fruits"> <form> <p>ปิดใช้งานช่องค้นหาด้านบนโดยคลิกปุ่ม DISABLE</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>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

เมื่อคลิกปุ่ม DISABLE:

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

เราสร้างองค์ประกอบ <input> ที่มี 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() ดึงองค์ประกอบ input type search โดยใช้ getElementById() และตั้งค่า disabled property เป็น true ทำให้ช่องค้นหาไม่สามารถคลิกได้อีกและผู้ใช้ไม่สามารถโต้ตอบได้ มันจะเป็นสีเทาตอนนี้:

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