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

Firefox 30 忽略密码的 autocomplete="off"，而是选择提示用户是否应将密码存储在客户端上。请注意 2014 年 5 月 5 日的以下 commentary：

密码管理器总是提示是否要保存密码。未经用户许可，不会保存密码。我们是继 IE 和 Chrome 之后第三个实现此更改的浏览器。

根据 Mozilla Developer Network 文档，布尔表单元素属性 autocomplete 可防止表单数据缓存在旧版浏览器中。

<input type="text" name="foo" autocomplete="off" />

---

除了设置 autocomplete=off 之外，您还可以让生成页面的代码随机化您的表单字段名称，可能通过在名称末尾添加一些特定于会话的字符串。

提交表单后，您可以在服务器端处理它们之前剥离该部分。这将阻止 Web 浏览器为您的字段查找上下文，也可能有助于防止 XSRF 攻击，因为攻击者无法猜测表单提交的字段名称。

---

大多数主要浏览器和密码管理器（正确的，恕我直言）现在忽略 autocomplete=off。

为什么？许多银行和其他“高安全性”网站“出于安全目的”在其登录页面中添加了 autocomplete=off，但这实际上降低了安全性，因为它会导致人们在这些高安全性网站上更改密码以便于记忆（从而破解) 因为自动完成功能被破坏了。

很久以前，大多数密码管理器开始忽略 autocomplete=off，现在浏览器开始只对用户名/密码输入做同样的事情。

不幸的是，自动完成实现中的错误将用户名和/或密码信息插入到不适当的表单字段中，导致表单验证错误，或者更糟糕的是，意外地将用户名插入到用户故意留空的字段中。

网络开发人员要做什么？

如果您可以将所有密码字段单独保留在页面上，那将是一个很好的开始，因为似乎密码字段的存在是用户/密码自动完成的主要触发因素。否则，请阅读以下提示。

Safari 注意到有 2 个密码字段并在这种情况下禁用自动完成，假设它必须是更改密码表单，而不是登录表单。因此，请确保在您允许的任何表单中使用 2 个密码字段（新密码和确认新密码）

不幸的是，Chrome 34 会在看到密码字段时尝试使用用户/密码自动填充字段。这是一个非常糟糕的错误，希望他们会改变 Safari 的行为。但是，将此添加到表单顶部似乎会禁用密码自动填充：

我尚未彻底调查 IE 或 Firefox，但如果其他人在评论中有信息，我很乐意更新答案。

---

有时，即使 autocomplete=off 也不会阻止将凭据填写到错误的字段中，但不会阻止用户或昵称字段。

此解决方法是 apinstein's post 关于浏览器行为的补充。

修复浏览器自动填充只读并在焦点上设置可写（单击和选项卡）

 <input type="password" readonly
     onfocus="this.removeAttribute('readonly');"/>

更新：

Mobile Safari 在字段中设置光标，但不显示虚拟键盘。新修复程序像以前一样工作，但它处理虚拟键盘：

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示https://jsfiddle.net/danielsuess/n0scguv6/

// 更新结束

因为浏览器自动将凭据填充到错误的文本字段！？

当有相同形式的密码字段时，我注意到 Chrome 和 Safari 上的这种奇怪行为。我猜浏览器会寻找一个密码字段来插入您保存的凭据。然后它自动填充（只是根据观察猜测）最近的文本输入字段，该字段出现在 DOM 中的密码字段之前。由于浏览器是最后一个实例，您无法控制它。

上面的这个只读修复对我有用。

---

Chrome 的解决方案是在输入类型密码中添加 autocomplete="new-password"。请检查下面的示例。

例子：

<form name="myForm"" method="post">
   <input name="user" type="text" />
   <input name="pass" type="password" autocomplete="new-password" />
   <input type="submit">
</form>

如果 Chrome 找到一个 type password 框，它总是会自动完成数据，这足以指示该框 autocomplete = "new-password"。

这对我很有效。

注意：使用 F12 确保您的更改生效。很多时候，浏览器将页面保存在缓存中，这给我一个不好的印象，它不起作用，但浏览器并没有真正带来变化。

---

<form name="form1" id="form1" method="post"
      autocomplete="off" action="http://www.example.com/form.cgi">

这适用于 Internet Explorer 和 Mozilla Firefox。缺点是它不是 XHTML 标准。

---

正如其他人所说，答案是autocomplete="off"。

但是，我认为值得说明为什么在某些情况下使用它是一个好主意，因为对此的一些答案和duplicate questions建议最好不要关闭它。

停止浏览器存储信用卡号码不应该留给用户。太多的用户甚至不会意识到这是一个问题。

在信用卡安全码字段上将其关闭尤为重要。如 this page 所述：

“永远不要存储安全码......它的价值取决于提供它的唯一方法是从实体信用卡中读取它的假设，证明提供它的人实际上持有卡。”

问题是，如果它是公共计算机（网吧、图书馆等），那么其他用户很容易窃取您的卡详细信息，甚至在您自己的计算机上，恶意网站也可能steal autocomplete data。

---

始终有效的解决方案

我已经通过使用随机字符解决了与谷歌浏览器的无休止的斗争。当你总是用随机字符串渲染自动完成时，它永远不会记住任何东西。

<input name="name" type="text" autocomplete="rutjfkde">

希望它对其他人有所帮助。

2022 年更新：

Chrome 进行了这项改进：autocomplete="new-password" 这将解决它，但我不确定 Chrome 是否会在一段时间后再次将其更改为不同的功能。

---

我不得不乞求与那些说避免禁用自动完成的答案不同。

首先要提出的是，未在登录表单字段上明确禁用自动完成是 PCI-DSS 失败。此外，如果用户的本地计算机遭到破坏，那么任何自动完成数据都可以被攻击者轻易获得，因为它是以明文形式存储的。

可用性肯定存在争议，但是在哪些表单字段应该禁用自动完成功能和哪些不应该禁用时，存在一个非常好的平衡。

---

三个选项：

第一的：

<input type='text' autocomplete='off' />

第二：

<form action='' autocomplete='off'>

第三（JavaScript代码）：

$('input').attr('autocomplete', 'off');

---

这对我有用。

<input name="pass" type="password" autocomplete="new-password" />

我们也可以在文本、选择等其他控件中使用此策略

---

在一个相关的或实际上，在完全相反的音符上——

“如果您是上述表单的用户并且想要重新启用自动完成功能，请使用此书签页面中的“记住密码”书签。它会从页面上的所有表单中删除所有 autocomplete="off" 属性。保留打好仗！”

---

此外

autocomplete="off"

利用

readonly onfocus="this.removeAttribute('readonly');"

对于您不希望他们记住表单数据的输入（username、password 等），如下所示：

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

希望这可以帮助。

---

只需设置 autocomplete="off"。这样做有一个很好的理由：您想提供自己的自动完成功能！

---

在这次谈话中，没有一个解决方案对我有用。

我终于想出了一个不需要任何 JavaScript 的纯 HTML 解决方案，可以在现代浏览器中运行（Internet Explorer 除外；必须至少有一个问题，对吧？），并且不需要您禁用整个表单的自动完成功能.

只需关闭 form 上的自动完成功能，然后为您希望它在表单中工作的任何 input 打开它。例如：

<form autocomplete="off">
    <!-- These inputs will not allow autocomplete and Chrome
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- This field will allow autocomplete to work even
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

---

我一直在尝试无尽的解决方案，然后我发现了这个：

只需简单地使用 autocomplete="false" 而不是 autocomplete="off"

就这么简单，它在谷歌浏览器中也像一个魅力！

---

我们确实在一个站点上使用了 sasb 的想法。

这是一个运行医生办公室的医疗软件网络应用程序。然而，我们的许多客户都是外科医生，他们使用了许多不同的工作站，包括半公共终端。因此，他们希望确保不了解自动保存密码的含义或没有注意的医生不会意外地让他们的登录信息易于访问。

当然，这是在 Internet Explorer 8、Firefox 3.1 等开始出现隐私浏览的想法之前。即便如此，许多医生仍被迫在 IT 不会改变的医院中使用老式浏览器。

因此，我们让登录页面生成仅适用于该帖子的随机字段名称。是的，它不太方便，但它只是让用户头疼的是不在公共终端上存储登录信息。

---

我认为 HTML 5 支持 autocomplete=off。

问问自己为什么要这样做——在某些情况下这可能是有道理的，但不要仅仅为了这样做而这样做。

这对用户来说不太方便，甚至在 OS X 中也没有安全问题（下面由 Soren 提到）。如果您担心人们的密码被远程盗取 - 即使您的应用使用 autcomplete=off，击键记录器仍然可以做到这一点。

作为选择让浏览器记住（大部分）我的信息的用户，如果您的网站不记得我的信息，我会觉得很烦人。

---

最佳解决方案：

防止自动完成用户名（或电子邮件）和密码：

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

防止自动完成字段：

<input type="text" name="field" autocomplete="nope">

解释：autocomplete 在 <input> 中继续工作，autocomplete="off" 不起作用，但您可以将 off 更改为随机字符串，例如 nope。

工作于：

铬：49、50、51、52、53、54、55、56、57、58、59、60、61、62、63 和 64

火狐：44、45、46、47、48、49、50、51、52、53、54、55、56、57和58

---

为字段使用非标准名称和 ID，因此“name”而不是“name_”。浏览器将不会将其视为名称字段。

最好的部分是您可以对某些（但不是全部）字段执行此操作，它会自动完成一些（但不是所有）字段。

---

添加 autocomplete="off" 不会减少它。

将 input 类型属性更改为 type="search"。
Google 不会将自动填充应用于具有搜索类型的输入。

---

我刚遇到这个问题并尝试了几次失败，但这一次对我有用（在 MDN 上找到）：

在某些情况下，即使自动完成属性设置为关闭，浏览器也会继续建议自动完成值。这种意想不到的行为可能会让开发人员感到非常困惑。真正强制不完成的技巧是为属性分配一个随机字符串，如下所示：

autocomplete="nope"

---

添加

autocomplete="off"

到表单标记将禁用该特定表单中所有 input 字段的浏览器自动完成功能（之前在该字段中键入的内容）。

测试：

火狐 3.5、4 测试版

互联网浏览器 8

铬合金

---

所以这里是：

function turnOnPasswordStyle() { $('#inputpassword').attr('type', "password"); }

---

为了避免无效的 XHTML，您可以使用 JavaScript 设置此属性。使用 jQuery 的示例：

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

问题是没有 JavaScript 的用户将获得自动完成功能。

---

这是浏览器现在忽略的安全问题。浏览器使用输入名称来识别和存储内容，即使开发人员认为该信息是敏感信息并且不应存储。

使两个请求之间的输入名称不同将解决问题（但仍会保存在浏览器的缓存中，也会增加浏览器的缓存）。

要求用户在浏览器设置中激活或停用选项并不是一个好的解决方案。该问题可以在后端解决。

这是修复。所有自动完成元素都是使用隐藏输入生成的，如下所示：

<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<?php echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

然后服务器像这样处理 post 变量：(Demo)

foreach ($_POST as $key => $val) {
    $newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
    if ($count) {
        $_POST[$val] = $_POST[$newKey];
        unset($_POST[$key], $_POST[$newKey]);
    }
}

可以照常访问该值

echo $_POST['username'];

并且浏览器将无法建议来自先前请求或先前用户的信息。

即使浏览器更新他们的技术以忽略/尊重自动完成属性，这将继续有效。

---

我不敢相信这在被报道这么久之后仍然是一个问题。以前的解决方案对我不起作用，因为 Safari 似乎知道元素何时未显示或不在屏幕上，但以下解决方案对我有用：

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

---

如果只是 autocomplete="off" 不起作用，也试试这些：

autocorrect="off" autocapitalize="off" autocomplete="off"

---

此处提到的所有技巧都不适用于 Chrome。这里有一个关于这个问题的讨论：https://code.google.com/p/chromium/issues/detail?id=468153#c41

在 <form> 中添加它是有效的（至少现在是这样）：

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

---

您可以在 input 中使用它。

例如;

<input type=text name="test" autocomplete="off" />

---