当输入类型为密码时，关闭自动完成（autocomplete='off'）无效，并使其上方的输入字段启用自动完成。

Question

我有一个禁用自动填充的表单，但它不起作用，并使在火狐浏览器和更高版本的谷歌浏览器中启用了自动填充

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>

当将类型从密码更改为文本时，它在所有浏览器中都可以使用。有人能帮忙解决这个问题吗？

- user2594463

---

澄清一下：我想你是在谈论密码管理器，因为浏览器不会自动填充密码字段。 - Álvaro González

不好意思，Alvaro。你可以在这里看到，我已经禁用了整个表单的自动完成功能，但是下拉菜单仍然显示在密码输入框之前的文本输入框中（就像代码中的那样）。 - user2594463

那就是密码管理器。根据我的经验，禁用自动完成可以防止浏览器提示存储用户名和密码，但不会使其忘记现有的密码。 - Álvaro González

谢谢，我明白了。但是当我执行上述表单时，在Chrome版本24中下拉菜单没有显示，而我能够在FF 18中看到存储的用户名+密码。这是浏览器问题吗？有没有办法删除现有的密码？ - user2594463

为什么要阻止用户使用他们信任的浏览器提供的更安全的密码？ - Richlv

Answer 1

在表单加载时，您可以将字段设置为只读。当该字段获得焦点时，您可以将其更改为可编辑状态。这是避免自动填充的最简单方法。

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

- sujivasagam

---

@Nishant Pandya和Jean Paul Ruiz，如果您在浏览器中禁用了JavaScript，它将无法工作。 - sujivasagam

@attofi 不，它也接受“false”和“new-password”。 - Michael

使用上述解决方案，autocomplete="off" 对我有效。 - vCillusion

@Jeff Johny 旧密码将保留在浏览器中。如果您清除浏览器数据，则不会出现此问题。 - sujivasagam

false 不正确，但 readonly 的解决方案很好和优雅。 - Stavros

如果用户双击该字段，则选项列表将重新出现... - Damoiskii

Answer 2

当我面临同样的问题时，我通过在密码字段上方创建一个临时文本框并将其隐藏来解决问题。

就像这样，

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
        ...
    </ul> </form>

这将使用户名文本字段不显示以前输入的任何单词。由于输入字段<input type="text" style="display:none;">没有像name，id这样的属性，它也不会发送任何额外的参数。

我不确定这是否是一个好的做法，但它可以解决问题。

- Arivarasan L

---

我尝试了很多解决方案，浪费了大约两个小时。你的窍门起作用了！朋友，继续保持好工作：-) - Sotiris Zegiannis

似乎在Firefox 39.0.3中又出现了问题 - 它仍然会自动填充密码字段 :( 但是添加<input type="password" style="display:none">确实有帮助 :) - JustAMartin

做这种“hack”来防止自动填充太令人沮丧了。现在autocomplete="off"的实际用途是什么？非常感谢你的解决方案帮助了我！ - Rossco

我非常确定这是一个安全漏洞。密码字段在浏览器中有特殊的保护措施。对于隐藏的文本字段，用户只需使用浏览器的开发人员工具即可访问该字段。 - Benjamin Maurer

Answer 3

这将防止自动填充密码到输入框(type="password")中。

<form autocomplete="off">
  <input type="password" autocomplete="new-password">
</form>

- sunny rai

---

正确。如此处所述，Firefox尚未实现对此值的支持。 - brass monkey

提交后，所有密码管理器都会尝试将当前密码更新为此输入值。不适用于“当前密码”输入。 - asologor

Answer 4

只需将autocomplete="new-password"属性添加到您的密码输入字段中。

要了解有关autocomplete的更多信息：

• WHATWG HTML标准文档
• Mozilla开发者文档

- alexpirine

---

这个在2020年对我有用。感谢实用的答案。 - Nikz

@Nikz 我在2022年仍在使用它。我很欣赏一些功能不会每六个月更改 :) - alexpirine

这会导致其他潜在的不良行为，比如密码助手弹出在该字段上。 - Geoffrey Hale

2022年在Chrome中无法正常工作。 - Rashid

这只是有效的。 - Jinu Joseph Daniel

Answer 5

浏览器通常有两个关于表单的相关但不同的功能：

• 表单自动填充，其中 <input type="text"> 类型（以及类似类型的）收集输入的值，并以下拉列表的形式提供它们。
  （这是一个简单的功能，效果相当好。）

• 密码管理器，在检测到您提交登录表单时，浏览器会提示记住用户名/密码组合。返回该网站时，大多数浏览器会在下拉框中显示可用的用户名（Firefox、Chrome、Internet Explorer...），但某些浏览器会在工具栏按钮中显示（Opera）。此外，Chrome会用硬编码的黄色突出显示各个字段。
  （这取决于启发式算法，可能无法支持某些页面。）

对于标记为 autocomplete="off" 的表单存在一种特殊情况。如果它是登录表单并且用户之前已存储了用户名/密码，则从本地数据库中删除密码似乎不太合适，因此可能没有浏览器这样做。（事实上，表单自动完成的数据也没有被删除。）Firefox决定赋予用户权力：你有密码，所以我让你使用它。Chrome则决定将权力赋予站点。

- Álvaro González

---

有没有办法阻止 Chrome 在下拉列表中显示建议？ - El Kopyto

@ElKopyto 不太准确。你可以做的是欺骗Chrome，将你的“input”命名为除“email”之外的其他名称。 ‍♂️ - Adam Orłowski

Answer 6

对于文本类型，请使用autocomplete="off"或autocomplete="false"

<input id="username" type="text" autocomplete="false">

使用 autocomplete="new-password" 作为密码类型的自动填充属性。

<input id="password" type="password" autocomplete="new-password">

- Venki WAR

Answer 7

我觉得对我有用的是在input type="password"中使用autocomplete="new-password"，像这样：

<input id="username" type="text">
<input id="password" type="password" autocomplete="new-password">

无论表单中有多少输入，都可以独立处理。

- Sieg

Answer 8

我尝试了各种方法，但只有这种组合在我的情况下适用于所有浏览器:

<input type="password" id="Password" name="Password" 
       autocomplete="new-password" 
       onblur="this.setAttribute('readonly', 'readonly');" 
       onfocus="this.removeAttribute('readonly');" readonly>

而且这也是一种非常干净的解决方案 :)

- Jan Capuder

Answer 9

autocomplete=off在现代浏览器中大多被忽略 - 主要是由于密码管理器等因素。

您可以尝试添加autocomplete="new-password"，虽然并非所有浏览器都完全支持它，但在某些浏览器上可以使用。

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password">
    </li>
        ...
    </ul> </form>

- Mahdi Afzal

Answer 10

添加autocomplete="off"是不够的 - Chrome会忽略它。

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

- Matas Vaitkevicius

---

这是唯一可以防止 Edge 版本 91.0.864.71（官方版本）（64 位）在我的表单上自动填充的方法。 - SmoveBB

它在Edge上运行 :) - undefined