資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在網頁表單欄位/輸入標籤上停用瀏覽器自動填充功能？
在本文中，我們將學習如何在網頁表單欄位或其輸入元素上停用瀏覽器自動填充功能，並且我們將使用“form”和“input”HTML標籤提供的“autocomplete”屬性。
瀏覽器自動填充是一個功能，它會建議使用者過去在表單中輸入和提交的值。預設情況下，瀏覽器中啟用了自動填充，因此當用戶點選輸入框時，該輸入值的建議會可見，使用者可以直接選擇任何建議來自動填充內容。
為了停用此行為，我們將看到兩種利用“form”和“input”HTML元素中提供的“autocomplete”屬性的方法。
方法 1
在這種方法中，我們將直接在“form”HTML標籤上使用“autocomplete”屬性來停用瀏覽器在“form”標籤內所有“input”元素上的自動填充行為。
示例
讓我們透過一個示例來檢查上述方法 -
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<h4>Form with autocomplete ON</h4>
<form>
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />
<br />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<br />
<input type="submit" value="Submit" />
</form>
<h4>Form with autocomplete OFF</h4>
<form autocomplete="off">
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />
<br />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
方法 2
在這種方法中，我們將直接在“input”HTML標籤上使用“autocomplete”屬性來停用瀏覽器僅在該特定“input”元素上的自動填充行為。
示例
讓我們透過一個示例來檢查上述方法 -
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<form>
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
示例 3
在此示例中，我們使用兩種方法來停用自動填充行為，透過使用 javascript 將“autocomplete”設定為 false，並透過將表單的 autocomplete 屬性設定為 off 來停用表單自動填充。
檔名：index.html
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
<script>
// Method 1: Setting autocomplete to false using JavaScript
function disableAutocomplete() {
document.getElementById("email").autocomplete = "off";
}
// Method 2: Disabling form autofill
function disableAutofill() {
var form = document.getElementById("myForm");
form.setAttribute("autocomplete", "off");
form.addEventListener("submit", function() {
this.removeAttribute("autocomplete");
});
}
</script>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<form id="myForm">
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
</form>
<button onclick="disableAutocomplete()">Disable Autocomplete for Email Field</button>
<button onclick="disableAutofill()">Disable Form Autofill</button>
</body>
</html>
結論
在本文中，我們學習瞭如何使用兩種不同的方法和三個示例來停用網頁表單欄位或輸入標籤上的預設瀏覽器自動填充行為。在第一種方法中，我們在“form”標籤上應用了“autocomplete”屬性來停用整個表單上的自動填充行為，在第二種方法中，我們在“input”標籤上應用了“autocomplete”屬性來僅停用該特定輸入元素上的行為。
更新於： 2023年8月2日
208 次檢視
廣告