如何使用 jQuery 禁用浏览器输入字段的自动填充功能?

jqueryweb developmentfront end technology

在本文中，我们将学习如何借助 jQuery 和"input"HTML 标签提供的"autocomplete"属性禁用浏览器输入字段的自动填充功能。

浏览器自动填充功能可以显示过去在表单中输入并提交的值。默认情况下，浏览器会启用自动填充功能，因此当用户点击某个输入框时，系统会显示针对该输入值的建议，用户可以直接选择其中任何一个建议来自动填充内容。

为了禁用此行为，我们将介绍两种方法，分别利用 jQuery 库和"input"HTML 元素中的"autocomplete"属性。

方法 1

在此方法中，我们将在输入 HTML 元素上使用 jQuery 的"attr"方法，向其传递值为"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>

方法 2

在此方法中，我们将在输入 HTML 元素上使用 jQuery 的"prop"方法，向其传递一个值为"off"的 prop"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");
         });

         // 附加示例:临时更改类型属性
         $("#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"属性。