資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究HTML DOM 輸入搜尋自動完成屬性
HTML DOM 輸入搜尋 autocomplete 屬性與 type="search" 的 <input> 元素的 autocomplete 屬性相關聯。autocomplete 屬性接受 "on" 或 "off" 值。on 值指定 Web 瀏覽器必須根據之前的輸入自動完成使用者文字，而 off 值則相反。
語法
以下是語法：
設定 autocomplete 屬性：
searchObject.autocomplete = "on|off"
這裡，on 表示 Web 瀏覽器將根據之前的輸入自動完成使用者輸入，而 off 表示它不會根據之前的輸入完成任何使用者輸入。預設情況下，其值為 on。
示例
讓我們來看一個輸入搜尋自動完成屬性的示例：
<!DOCTYPE html>
<html>
<body>
<h1>Input Search autocomplete property</h1>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br>
<input type="submit">
</form>
<p>Off the autocomplete in the above search field by clicking on the below button</p>
<button onclick="changeAuto()">Autocomplete Off</button>
<p id="Sample"></p>
<script>
function changeAuto() {
document.getElementById("SEARCH1").autocomplete = "off";
document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
}
</script>
</body>
</html>輸出
這將產生以下輸出：
在上面的欄位中輸入一些文字時，您可以看到您的文字根據之前的輸入自動完成：
單擊“關閉自動完成”按鈕後，自動完成文字將不會被捕獲：
在上面的示例中：
我們首先建立了一個 type="search"、name="fruits" 的 <input> 元素，並將其 autocomplete 屬性設定為 on。這確保文字將根據我們的先前輸入完成。搜尋欄位位於包含提交按鈕的表單內，用於將表單資料提交到伺服器：
<form action="/Sample_page.php"> FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br> <input type="submit"> </form>
然後，我們建立一個“關閉自動完成”按鈕，當用戶單擊該按鈕時，它將執行 changeAuto() 方法：
<button onclick="changeAuto()">Autocomplete Off</button>
changeAuto() 方法使用 getElementById() 方法獲取 type 為“search”的 <input> 元素，並將其 autocomplete 屬性值設定為 off。這意味著文字現在不會自動完成，使用者必須手動輸入完整文字。然後，我們使用其 innerHTML 屬性在 id 為“Sample”的段落中顯示有關此更改的訊息：
function changeAuto() {
document.getElementById("SEARCH1").autocomplete = "off";
document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
}
更新於：2021年2月19日
167 次瀏覽
廣告