HTML DOM Form autocomplete屬性用法及代碼示例

HTML DOM 表單自動完成屬性與表單元素的自動完成屬性相關聯。使用 autocomplete 屬性，我們可以設置或返回給定表單的 autocomplete 屬性值。此屬性指定輸入字段是否應根據之前在文本字段中寫入的文本自動完成用戶編寫的文本。

如果為表單設置了自動完成，則可以為特定輸入字段關閉自動完成屬性，反之亦然。

用法

以下是語法 -

設置自動完成屬性 -

formObject.autocomplete = on|off

這裏，“on” 是默認的，瀏覽器會嘗試根據之前的文本自動完成用戶值。將其設置為關閉意味著瀏覽器將不會完成用戶輸入，用戶必須自己鍵入值。

示例

讓我們看一個自動完成屬性的例子 -

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function changeAuto() {
      document.getElementById("FORM1").autocomplete = "on";
      document.getElementById("Sample").innerHTML = "The input text will now be autocomplete
";
   }
</script>
</head>
<body>
<h1>Form autocomplete property example</h1>
<form id="FORM1" autocomplete="off">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAuto()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

輸出

這將產生以下輸出 -

單擊“更改”按鈕並在“用戶名”字段中輸入文本 -

在上麵的例子中 -

我們創建了一個表單，id=“Form1”，自動完成設置為 “off”。這意味著用戶將不得不在沒有網絡瀏覽器幫助的情況下自己鍵入值來自動完成此文本。該表單也包含一個文本字段和一個密碼字段 -

<form id="FORM1" autocomplete="off">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>

然後我們創建了一個按鈕 CHANGE，當用戶點擊時，它將執行 changeAuto() 方法 -

<button onclick="changeAuto()">CHANGE</button>

changeAuto() 方法使用 getElementById() 方法獲取表單元素，並將其自動完成屬性從 “off” 設置為 “on”。使用 ID 為 “Sample” 的段落的 innerHTML 屬性，我們通過向用戶顯示文本來顯示此更改 -

function changeAuto() {
   document.getElementById("FORM1").autocomplete = "on";
   document.getElementById("Sample").innerHTML = "The input text will now be autocomplete ";
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Form autocomplete Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。