資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 表單和輸入欄位中停用瀏覽器自動完成和自動填充？
HTML 的autocomplete 屬性指定是否應該為輸入欄位啟用或停用自動完成。它使瀏覽器能夠對值進行預測。當用戶開始在欄位中輸入時，瀏覽器應該根據以前輸入的值顯示填充選項。它適用於<input> 元素，例如<textarea> 元素、<select> 元素和<form> 元素，因為它們接受文字或數字值作為輸入。
它採用兩個屬性值，on 和 off。
On: 指定已啟用自動完成。
Off: 表示已關閉自動完成。
當用戶開始在 HTML 表單欄位中輸入時，瀏覽器預設啟用自動完成功能。許多使用者允許其瀏覽器收集表單資料，這使他們能夠在將來在表單中使用自動完成。但是，有時這可能無法正常工作，或者使用者可能必須手動輸入詳細資訊中的所有資訊。此外，使用者可能存在隱私問題，因此瀏覽器可以允許他們停用它。
為我們的表單和欄位設定autocomplete="off" 有兩種效果。它指示瀏覽器不要儲存類似表單上的使用者輸入資料以供以後自動完成，儘管瀏覽器特定的演算法有所不同。它允許瀏覽器避免在會話歷史記錄中快取表單資料。當表單資料儲存在會話歷史記錄中時，即使表單已提交且使用者已單擊“後退”按鈕返回到初始表單頁面，使用者輸入的資訊仍會顯示。
要停用表單和輸入標籤中的自動完成，我們可以使用<input> 和<form> 元素的 autocomplete 屬性。
使用 autocomplete=”off”
在以下示例中，我們將為整個表單和所有輸入元素設定 autocomplete 為“off”以停用它。
示例
<!DOCTYPE html>
<html>
<head>
<title>
How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
</title>
<style>
.box{
background-color:thistle;
padding:10px;
width:380px;
}
div{
margin:20px;
}
h3{
margin-left:20px;
}
</style>
</head>
<body>
<h3>Student Details</h3>
<div class="box">
<form action="/form/submit" method="get" autocomplete="off">
<div>
<label for="name">Name:
<input type="text" name="name" id="name" autocomplete="off">
</label>
</div>
<div>
<label for="rno">Roll Number:
<input type="number" name="rno" id="rno" autocomplete="off">
</label>
</div>
<div>
<label for="backlogs">Active Backlogs:
<input type="number" name="backlogs" id="backlogs" autocomplete="off">
</label>
</div>
<div>
<label for="cgpa">CGPA:
<input type="number" name="cgpa" id="cgpa" autocomplete="off">
</label>
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
使用 autocomplete=”false”
此示例顯示瞭如何透過在表單的第一個子元素中新增一個具有 autocomplete=”false” 的隱藏輸入來停用自動完成。
示例
<!DOCTYPE html>
<html>
<head>
<title>
How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
</title>
<style>
.box{
background-color:thistle;
padding:10px;
width:380px;
}
div{
margin:20px;
}
h3{
margin-left:20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h3>Student Details</h3>
<div class="box">
<form action="/form/submit" method="post" autocomplete="off">
<input autocomplete="false" name="hidden" type="text" class="hidden">
<div>
<label for="name">Name:
<input type="text" name="name" id="name">
</label>
</div>
<div>
<label for="rno">Roll Number:
<input type="number" name="rno" id="rno">
</label>
</div>
<div>
<label for="backlogs">Active Backlogs:
<input type="number" name="backlogs" id="backlogs">
</label>
</div>
<div>
<label for="cgpa">CGPA:
<input type="number" name="cgpa" id="cgpa">
</label>
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
現代瀏覽器不支援登入欄位的 autocomplete="off"，因為許多使用者不希望瀏覽器記住其密碼。對於登入欄位，無論輸入欄位還是表單欄位的自動完成是否停用都沒有區別。
當網站為<form> 或<input> 元素指定 autocomplete="off" 並且包含使用者名稱/密碼欄位時，瀏覽器仍會記住這些欄位，如果使用者接受，瀏覽器將在使用者下次訪問該網站時自動填充這些欄位。為此，使用者可以使用 autocomplete=”new-password” 提示瀏覽器不要對此做出反應。
使用 JavaScript 和 JQuery
可能有一些更好的方法可以使用 JavaScript 和 jQuery 停用自動完成和自動填充。讓我們來看一個例子。
示例
<!DOCTYPE html>
<head>
<title>
How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<form action="/form/submit" method="post">
<div class="container">
<input type="text" id="name" name="username" placeholder="Name">
<br><br>
<input type="number" id="phoneno" name="phoneno" placeholder="Phone Number">
<br><br>
<button type="submit">Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
$('input').attr('autocomplete', 'off');
});
</script>
</body>
</html>
1K+ 次瀏覽
