如何在 HTML 表单和输入字段上禁用浏览器自动完成和自动填充-之路教程

←如何创建 Mailto 链接

如何使用 CSS 禁用表单字段→

如何禁用自动完成

要禁用表单中文本的自动完成功能，请使用 <input> 和 <form> 元素的 autocomplete 属性。

我们将需要此属性的“关闭”值。

这可以在 <form> 中完成，用于完整表单或者特定 <input> 元素：

将 autocomplete="off" 添加到 <form> 元素以禁用整个表单的自动完成。
为表单的特定 <input> 元素添加 autocomplete="off"。

autocomplete 属性适用于以下 <input> 类型：文本、搜索、url、电话、电子邮件、密码、日期选择器、范围和颜色。

让我们看一个示例，其中整个表单和两个 <input> 元素的自动完成设置为“关闭”。

将 autocomplete 属性与 "off" 值一起使用的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      input {
        margin: 5px 0;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="get" autocomplete="off">
      <div>
        <input type="text" name="Name" placeholder="First Name" autocomplete="off">
      </div>
      <div>
        <input type="text" id="lname" name="Surname" placeholder="Last Name" autocomplete="off">
      </div>
      <div>
        <input type="number" name="Credit card number" placeholder="Credit card number">
      </div>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

让我们看另一个例子。
其中我们需要执行以下步骤：

将 autocomplete="off" 添加到 <form> 元素。
添加一个带有 autocomplete="false" 的隐藏 <input> 作为表单的第一个子元素。

禁用自动完成的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      input:not[type="submit"] {
        background-color: #ffffff;
        border: 1px solid #cccccc;
        padding: 5px;
      }
      input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
      }
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <form autocomplete="off" method="post" action="/form/submit">
      <input autocomplete="false" name="hidden" type="text" class="hidden">
      <div>
        <label for="name">Name
          <input type="text" name="name" Id="name" placeholder="Enter Your Name">
        </label>
      </div>
      <br/>
      <div>
        <label for="email">Email
          <input type="Email" name="email" Id="email" placeholder="Enter Your Email">
        </label>
      </div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

为表单字段设置 autocomplete="off " 有两种效果：

告诉浏览器不要将用户输入的数据保存在类似的表单上以供以后自动完成，尽管特定于浏览器的算法有所不同。
防止浏览器缓存会话历史记录中的表单数据。当表单数据存储在会话历史记录中时，用户填写的信息仍会显示，即使用户已经提交表单并点击返回按钮返回初始表单页面。

由于许多用户不希望浏览器记住密码，现代浏览器不支持 autocomplete="off " 用于登录字段。
对于登录字段，是否为 <input> 字段或者 <form> 字段禁用自动完成没有区别。

当为 <form> 或者 <input> 元素设置 autocomplete="off " 并且其中包含用户名/密码字段时，浏览器仍将允许记住这些字段，如果用户接受，浏览器将自动填充用户下次访问该时的字段。

Firefox（自版本 38 起）和 Google Chrome（自版本 34 起）以这种方式运行。

在这种情况下，我们代表一个用户管理页面，用户可以其中为其他用户指定新密码，并且我们不想自动填充密码字段，请使用 autocomplete="new-password"，这是浏览器的标志他们不需要对此做出反应。

如果谷歌浏览器记住登录名或者密码，它会将背景更改为黄色。
要去除背景颜色，我们可以尝试以下操作。

从字段中删除黄色背景的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="GET">
      <div>
        <label for="name">Name
          <input type="text" name="name" Id="name" placeholder="Enter Your Name">
        </label>
      </div>
      <br/>
      <div>
        <label for="email">Email
          <input type="email" name="email" Id="email" placeholder="Enter Your Email">
        </label>
      </div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

使用 Javascript 和 jQuery 禁用自动完成和自动填充可能有一些更好的方法。

在我们决定哪个最适合代码之前，让我们也看看它们的一些示例。

使用 Javascript 禁用自动完成的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <div class="form-group">
        <input type="text" name="username" placeholder="Enter Name">
        <input type="email" name="email" placeholder="Enter Email">
        <button type="submit"> Submit </button>
      </div>
    </form>
    <script>
      let tagArr = document.getElementsByTagName("input");
      for (let i = 0; i < tagArr.length; i++) {
        tagArr[i].autocomplete = 'off';
      }
    </script>
  </body>
</html>

使用 Javascript 禁用自动完成的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>文档的标题</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <div class="form-group">
        <input type="text" id="name" name="username" placeholder="Enter Name">
        <input type="email" id="email" name="email" placeholder="Enter Email">
        <button type="submit">Submit</button>
      </div>
    </form>
    <script>
      $(document).ready(function() {
        $('input').attr('autocomplete', 'off');
      });
    </script>
  </body>
</html>

使用 jQuery 禁用自动完成的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>文档的标题</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js">
    </script>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <div class="form-group">
        <input type="text" id="name" name="username" placeholder="Enter Name">
        <input type="email" id="email" name="email" placeholder="Enter Email">
        <button type="submit">Submit</button>
      </div>
    </form>
    <script>
      $(document).ready(function() {
        try {
          $("input[type='text']").each(function() {
            $(this).attr("autocomplete", "off");
          });
        }
        catch (e)
        {}
      });
    </script>
  </body>
</html>

使用 jQuery 禁用自动填充的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" 
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
            crossoroirn="anonymous"></script>
    <script src="https://github.com/jquery.disableAutoFill/assets/js/jquery.disableAutoFill.min.js"></script>
  </head>
  <body>
    <form action="/form/submit" method="post" id="login-form">
      <input name="username" type="text" placeholder="username" />
      <input name="password" type="password" placeholder="password" />
      <input type="submit" value="Submit">
    </form>
    <script>
      $(function() {
        $('#login-form').disableAutoFill();
      });
    </script>
  </body>
</html>

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

当用户开始在 HTML 表单字段中输入时，浏览器默认启用自动完成功能。
许多用户让他们的浏览器收集表单数据，以便将来在表单中使用自动完成功能。
但是，在某些情况下，这可能无法准确工作，或者我们可能更希望用户手动插入所有详细信息。
此外，用户可能存在隐私问题，因此浏览器可以让用户禁用它。

但是，某些以表格形式呈现的数据或者在未来不重要（例如一次性密码），或者包含机密信息（例如特定的政府身份或者银行卡的安全代码）。
作为的作者，我们可能希望浏览器不要记住此类字段的值，即使浏览器的自动完成功能已启用。
这允许浏览器提供自动完成（即显示用户开始输入的字段的可能完成）或者自动填充（即在加载时预填充某些字段）。

日期：2020-06-02 22:15:07 来源：oir作者：oir

←如何创建 Mailto 链接

如何使用 CSS 禁用表单字段→

如何禁用自动完成

将 autocomplete 属性与 "off" 值一起使用的示例：

禁用自动完成的示例：

从字段中删除黄色背景的示例：

使用 Javascript 禁用自动完成的示例：

使用 Javascript 禁用自动完成的示例：

使用 jQuery 禁用自动完成的示例：

使用 jQuery 禁用自动填充的示例：

目录