Thuộc tính HTML DOM Input Search bị vô hiệu hóa được sử dụng để thiết lập hoặc trả về việc trường tìm kiếm có nên bị vô hiệu hóa hay không. Nó sử dụng các giá trị boolean với true đại diện cho phần tử nên bị vô hiệu hóa và ngược lại là false. Thuộc tính bị vô hiệu hóa được đặt thành false theo mặc định. Tuy nhiên, phần tử bị vô hiệu hóa có màu xám theo mặc định và không thể nhấp vào được.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính bị vô hiệu hóa -
searchObject.autofocus = true|false
Ở đây, true =trường tìm kiếm bị vô hiệu hóa và false =trường tìm kiếm không bị vô hiệu hóa. Nó là sai theo mặc định.
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính bị vô hiệu hóa Tìm kiếm đầu vào -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút TẮT -
Trong ví dụ trên -
Đầu tiên, chúng tôi đã tạo một phần tử với type =”search”, id =”SEARCH1” và name =”fruit”. Trường tìm kiếm nằm trong biểu mẫu -
<form> FRUITS: <input type="search" id="SEARCH1" name="fruits"> <form>
Sau đó, chúng tôi tạo một nút CHANGE sẽ thực thi phương thức disableSearch () khi người dùng nhấp vào -
<button type="button" onclick="disableSearch()">DISABLE</button>
Phương thức disableSearch () nhận phần tử đầu vào với kiểu tìm kiếm bằng phương thức getElementById () và đặt thuộc tính bị vô hiệu hóa của nó thành true. Điều này làm cho trường tìm kiếm không thể nhấp vào được nữa và người dùng không thể tương tác với trường đó nữa. Bây giờ nó đã chuyển sang màu xám -
function disableSearch() {
document.getElementById("SEARCH1").disabled=true;
document.getElementById("Sample").innerHTML = "The search field is now disabled" ;
}