38

我知道 Stackoverflow 上有一个类似的问题，但没有一个解决方案对我有用。

<form autocomplete="off" id="search_form" method="post" action="">
    <input autocomplete="off" type="text" />
</form>

正如你所看到的，我把autocomplete=off表单和输入字段都放在了，但谷歌浏览器仍然显示这个自动完成列表。这在 Firefox 和 Safari 等其他浏览器中不会发生。

autocomplete=off除了放在表单标签之外还有其他解决方案吗？

4

6 回答 6

24

这是由于 Chrome 做出的设计决定（可以说任何 Chrome 用户都想要这种行为）。

原因是谷歌称之为选区优先级：

  1. 用户为王！他们想要什么最重要。
  2. 用户想要使用密码或自动填充管理器。
  3. Web 应用程序说它不希望保存表单值。
  4. 用户的选择更重要，所以保留了表单值。

有一些方法可以解决，但很有可能这些方法会在未来的 Chrome 版本中得到修复，因为 Chrome 开发人员认为他们的行为是正确的，而您的解决方法是错误的。

即使您的解决方法确实有效，它也会给用户带来令人困惑的行为 - 他们希望自动填充能够根据他们的设置工作。

许多用户已经选择使用插件或脚本忽略应用程序自动完成设置，这些插件或脚本只是删除页面中的任何 autocomplete=off - 他们已经有了这个选择。

您最好在设计时假设自动完成功能可以工作并考虑到这一点。

就我个人而言，我讨厌网站不记得我的密码并覆盖那些使用浏览器扩展的密码。然而，我也为我的工作创建了应用程序，并且召回密码被视为一种安全风险，因为用户可能会让他们的机器处于解锁状态。在我个人看来，用户不锁定他们的机器是本地 IT 的问题，而不是应用程序的问题，如果他们的用户不能被信任，本地 IT 可以禁用所有 Web 应用程序的所有密码自动完成。

不幸的是，为了通过安全检查，一些应用程序仍然必须禁用自动完成，有办法做到这一点，但它们都很糟糕。第一个技巧是使密码输入全新：

<input type="hidden" name="password" id="realPassword" />
<input type="password" name="{randomly generated}" 
    onchange="document.getElementById('realPassword').value = this.value" />

我已经内联了所有内容以简化，但这应该让您了解黑客 - 没有插件或浏览器可以用全新的名称自动填充输入。

如果您正确构建 ARIA 和标签，则此解决方案会中断（因为这样可以让浏览器/扩展程序找到并自动填充标签中的输入）。

所以选项 2，也很可怕，是等到自动完成触发之后，然后将字段清空：

<input type="text" name="username" 
    onchange="window.setTimeout(function() { 
        document.getElementById('password').value = ''; 
    }, 100)" />
<input type="password" id="password" />

就像我说的，讨厌。

于 2014-07-22T10:10:58.057 回答
7

这可能是谷歌浏览器的一个错误，你不能通过创建隐藏输入来作弊。自动完成功能将获取第一个输入文本来填充数据。

<form autocomplete="off" id="search_form" method="post" action="">
    <input type="text" style="display:none" />
    <input autocomplete="off" type="text" />
</form>
于 2014-06-12T08:04:26.993 回答
1

这似乎是 Google Chrome 中经常出现的问题，尽管在表单中添加自动完成功能在我的构建中确实有效。也许在较新的版本中不再存在。

这是一个黑客。给你的输入一个 id，比如说foo，在 JavaScript 中：

if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) {
    setTimeout(function () {
        document.getElementById('foo').autocomplete = 'off';
    }, 1);
}

检查这是否适合您。唯一的缺点是，对于那些使用 Chrome并禁用 JavaScript 的人来说，该字段仍将自动完成。

于 2013-08-19T03:49:58.820 回答
1

该autocomplete属性是 中的新属性HTML5。

由于您没有提到DOCTYPE，我认为这是唯一可能的原因。有关更多详细信息，请查看MDN 的如何关闭表单自动完成。

尝试添加以下HTML5 DOCTYPE.

<!DOCTYPE html>

仅供参考：在某些浏览器中，您可能需要激活一个autocomplete功能才能使其工作（在浏览器菜单中的“首选项”下查看）。

您以正确的方式使用它，在element下提及autocomplete属性form。但是，您不需要为input标签单独提及它。

<form autocomplete="off" id="search_form" method="post" action="">
    <input type="text" />
</form>

更新：在这里您可以找到使用 XHTML 的自动完成属性和 Web 文档中的解决方案列表。

于 2013-08-19T03:50:52.837 回答
0

如果您使用 AJAX 调用将数据提交到后端。完成 AJAX 调用后，密码字段应清晰。然后不会弹出密码保存提示。

例如：$(#foo).val("");

于 2014-05-23T04:27:09.563 回答
0

试试这个，在搞砸了一段时间后为我工作

if ( navigator.userAgent.toLowerCase().indexOf('chrome') >= 0 ) {
    $('input[autocomplete="off"]').each( function(){
        var type = $(this).attr( 'type');
        $(this).attr( 'type', '_' + type );
        $(this).attr( 'type', type );
    });
}
于 2014-06-02T12:54:14.727 回答