HTML DOM Input Search disabled 属性
htmlweb developmentfront end technology更新于 2024/5/28 14:36:17
HTML DOM Input Search disabled 属性用于设置或返回搜索字段是否应禁用。它使用布尔值，true 表示元素应禁用，false 表示禁用。disabled 属性默认设置为 false。但是，disabled 元素默认显示为灰色且不可点击。
语法
以下是语法 −
设置 disabled 属性 −
searchObject.autofocus = true|false
此处，true=搜索字段已禁用，false=搜索字段未禁用。默认为 false。
示例
让我们看一个 Input Search disabled 属性的示例 −
<!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>
输出
这将产生以下输出 −
点击"禁用"按钮 −
在上面的例子中 −
我们首先创建了一个 <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() 方法使用 getElementById() 方法获取类型为 search 的输入元素，并将其 disabled 属性设置为 true。这使得搜索字段不再可点击，用户也无法与其交互。现在它变成了灰色。 −
function disableSearch() {
document.getElementById("SEARCH1").disabled=true;
document.getElementById("Sample").innerHTML = "The search field is now disabled" ;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
