如何在 HTML 表单和输入字段上禁用浏览器自动完成和自动填充功能?

htmlweb developmentfront end technology更新于 2025/3/26 21:32:17

HTML autocomplete 属性指定是否应为输入字段启用或禁用自动完成功能。它使浏览器能够对输入值进行预测。当用户开始在字段中输入时，浏览器应根据先前输入的值显示填充选项。该功能适用于 <input> 元素，例如 <textarea> 元素、<select> 元素和 <form>元素接受文本或数字作为输入。

它有两个属性值:on 和 off。

On:表示启用自动完成功能。
Off:表示关闭自动完成功能。

当用户开始在 HTML 表单字段中输入内容时，浏览器默认启用自动完成功能。许多用户允许浏览器收集表单数据，以便将来在表单中使用自动完成功能。但是，有时此功能可能无法正常工作，或者可能强制用户手动输入详细信息中的所有信息。此外，出于隐私方面的考虑，浏览器可以允许用户禁用此功能。

为表单和字段设置 autocomplete="off" 有两个效果。它指示浏览器不要保存类似表单上的用户输入数据以供日后自动完成，尽管不同浏览器的算法有所不同。它允许浏览器避免在会话历史记录中缓存表单数据。当表单数据保存在会话历史记录中时，即使表单已提交且用户点击了"返回"按钮返回到初始表单页面，用户输入的信息仍会显示。

要禁用表单和输入标签中的自动完成功能，我们可以使用 <input> 和 <form> 元素的 autocomplete 属性。

使用 autocomplete="off"

在下面的示例中，我们将整个表单和所有输入元素的自动完成功能设置为"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>