如何在 Web 表单字段/输入标签上禁用浏览器自动完成功能?

htmlweb developmentfront end technology更新于 2024/11/12 10:52:17

在本文中，我们将学习如何在 Web 表单字段或其输入元素上禁用浏览器自动完成功能，我们将使用"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>

总结

本文通过两种不同的方法和三个示例，学习了如何禁用 Web 表单字段或输入标签上的默认浏览器自动完成行为。第一种方法，我们在"form"标签上应用了"autocomplete"属性，以禁用整个表单的自动完成行为;第二种方法，我们在"input"标签上应用了"autocomplete"属性，以仅禁用特定输入元素上的自动完成行为。