HTML DOM 輸入搜尋已停用屬性


HTML DOM 輸入搜尋已停用屬性用於設定或返回是否應禁用搜索欄位。它使用布林值,其中 true 表示應停用元素,否則為 false。預設情況下,disabled 屬性設定為 false。但是,預設情況下,已停用元素呈灰色且不可單擊。

語法

以下是對 - 的語法

設定 disabled 屬性 -

searchObject.autofocus = true|false

此處,true=禁用搜索欄位, false=未禁用搜索欄位。它預設情況下為 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>

輸出

這將產生以下輸出 -

單擊 DISABLE 按鈕:

在以上示例中 -

我們首先建立了一個 type=”search”,id=”SEARCH1”和 name=”fruits”的 <input> 元素。搜尋欄位位於表單內 -

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

然後建立一個按鈕 CHANGE,使用者點選時將執行 disableSearch() 方法 -

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

disableSearch() 方法使用 getElementById() 方法獲取輸入元素,其型別為搜尋,並將其 disabled 屬性設定為 true。這使搜尋欄位無法再被單擊,使用者無法再與之互動。它現在已變為灰色 -

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

更新於: 19-Feb-2021

254 閱覽

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.