資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 jQuery 停用輸入欄位的瀏覽器自動填充功能？
在本文中，我們將學習如何藉助 jQuery 和“input” HTML 標籤提供的“autocomplete”屬性來停用輸入欄位的瀏覽器自動填充功能。
瀏覽器自動完成是一個功能，它會建議過去輸入並提交到表單中的值。預設情況下，瀏覽器中啟用了自動完成功能，因此當用戶點選輸入框時，該輸入值的建議會可見，使用者可以直接選擇任何建議來自動填充內容。
為了停用此行為，我們將看到兩種方法，它們利用 jQuery 庫和“input” HTML 元素中提供的“autocomplete”屬性。
方法一
在這種方法中，我們將對 input HTML 元素使用“attr” jQuery 方法，為其傳遞值為“off”的“autocomplete”屬性，以便停用該輸入元素上的自動填充功能。
示例
讓我們藉助一個示例來檢查上述方法：
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h3>How to disable browser autofill on input fields using jQuery?</h3>
<form id="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" />
<script>
$(document).ready(function () {
$("#firstName").attr("autocomplete", "off");
$("#lastName").attr("autocomplete", "off");
});
</script>
</form>
</body>
</html>
方法二
在這種方法中，我們將對 input HTML 元素使用“prop” jQuery 方法，為其傳遞值為“off”的“autocomplete”屬性，以便停用該輸入元素上的自動填充功能。
示例 1
讓我們藉助一個示例來檢查上述方法：
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h3>How to disable browser autofill on input fields using jQuery?</h3>
<form id="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" />
<script>
$(document).ready(function () {
$("#firstName").prop("autocomplete", "off");
$("#lastName").prop("autocomplete", "off");
});
</script>
</form>
</body>
</html>
示例 2
在這個示例中，我們透過在獲得焦點時臨時更改電子郵件輸入欄位的 type 屬性來停用瀏覽器自動填充功能。
檔名：index.html
<html lang="en">
<head>
<title>How to disable browser autofill on input fields using jQuery?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h3>How to disable browser autofill on input fields using jQuery?</h3>
<form id="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" />
<script>
$(document).ready(function () {
$("#firstName").prop("autocomplete", "off");
$("#lastName").prop("autocomplete", "off");
});
// Additional example: Temporarily changing the type attribute
$("#email").focus(function () {
$(this).prop("type", "text");
$("[type='text']").prop("autocomplete", "off");
});
$("#email").blur(function () {
$(this).prop("type", "email");
$("[type='text']").prop("autocomplete", "on");
});
</script>
</form>
</body>
</html>
結論
在本文中，我們學習瞭如何使用 jQuery 透過兩種不同的方法和三個示例來停用輸入欄位上的預設瀏覽器自動填充行為。在第一種方法中，我們使用 jQuery attr 方法在“input”標籤上應用了“autocomplete”屬性，在第二種方法中，我們使用 jQuery prop 方法在“input”標籤上應用了“autocomplete”屬性。
更新於：2023年8月2日
瀏覽量：1K+
廣告