HTML DOM 表單 autocomplete 屬性


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

如果為表單設定了 autocomplete,則可以為特定輸入欄位關閉 autocomplete 屬性,反之亦然。

語法

以下是語法:

設定 autocomplete 屬性:

formObject.autocomplete = on|off

這裡,“on”是預設值,瀏覽器會根據之前的文字嘗試自動完成使用者值。將其設定為“off”表示瀏覽器不會完成使用者輸入,使用者必須自己輸入值。

示例

讓我們來看一個 autocomplete 屬性的示例:

線上演示

<!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”且 autocomplete 設定為“off”的表單。這意味著使用者必須自己輸入值,而無需 Web 瀏覽器的幫助來自動完成此文字。表單還包含一個文字欄位和一個密碼欄位:

<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>

然後,我們建立了一個名為“更改”的按鈕,當用戶點選它時,將執行 changeAuto() 方法:

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

changeAuto() 方法使用 getElementById() 方法獲取表單元素,並將它的 autocomplete 屬性從“off”設定為“on”。使用 id 為“Sample”的段落的 innerHTML 屬性,我們透過向用戶顯示文字來說明此更改:

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

更新於:2021年2月19日

118 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.