我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。

尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。


当前回答

我有一个非常简单的解决方案,这个问题不需要代码和一个可接受的解决方案。Chrome经常读取输入的标签并自动完成。您可以简单地在标签中插入一个“空”字符。

E.g. <label>Surname</labe>

Becomes: <label>Sur&#8205;name</label>

‍是“空字符串”的HTML转义字符。

这仍然会显示“姓氏”,但自动完成不会检测字段,并尝试自动完成它。

其他回答

隐藏的输入元素技巧似乎仍然有效(Chrome 43),以防止自动填充,但要记住的一件事是Chrome将尝试基于占位符标记自动填充。您需要将隐藏输入元素的占位符与您试图禁用的输入的占位符匹配。

在我的情况下,我有一个字段的占位符文本“城市或Zip”,我正在使用谷歌地方自动完成。它似乎试图自动填写,就好像它是一个地址表单的一部分。直到我在隐藏元素上放置了与实际输入相同的占位符,这个技巧才起作用:

<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />

虽然我同意自动补全应该是用户的选择,但有时Chrome对它过于热心(其他浏览器可能也是如此)。例如,具有不同名称的密码字段仍然自动填充已保存的密码,而前一个字段仍然填充用户名。当表单是web应用程序的用户管理表单,而你不想自动填充以填充你自己的凭证时,这尤其糟糕。

Chrome完全忽略autocomplete="off"现在。虽然JS技巧可能很有效,但我发现了一种简单的方法:

将密码字段的值设置为控制字符8 (PHP中的“\x08”或&#8;在HTML)。这将停止Chrome自动填充字段,因为它有一个值,但没有实际的值输入,因为这是退格字符。

是的,这仍然是一个黑客,但它为我工作。YMMV。

直到上周,以下两种解决方案似乎都适用于Chrome、IE和Firefox。但随着Chrome 48版的发布(仍然是49版),它们不再适用:

表格顶部有以下内容:

<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

在密码输入元素中: 自动完成=“关闭”

因此,为了快速解决这个问题,我首先尝试使用一个主要的hack,即最初将密码输入元素设置为禁用,然后在document ready函数中使用setTimeout再次启用它。

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

但这似乎太疯狂了,我做了更多的搜索,在禁用Chrome自动填充中找到了@tibalts的答案。他的答案是在密码输入中使用autocomplete="new-password",这似乎在所有浏览器上都可以工作(在这个阶段,我保留了上面的修复程序1)。

下面是谷歌Chrome开发者讨论中的链接: https://code.google.com/p/chromium/issues/detail?id=370363#c7

我在我的表单中的一个搜索字段也有类似的问题。无论是autocomplete= "false"还是autocomplete= "off"都不适合我。结果是,当你有aria-label属性在输入元素是设置为一些像城市或地址或类似的东西,chrome覆盖你所有的设置和显示自动完成无论如何

所以修复我所做的是从aria标签中删除城市部分,并提出一个不同的值。最后自动完成停止显示

更新

现在Chrome似乎忽略了style="display: none;"或style="visibility: hidden; "属性。

你可以把它改成这样:

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

根据我的经验,Chrome只自动完成第一个<input type="password">和前一个<input>。所以我添加了:

<input style="display:none">
<input type="password" style="display:none">

到<form>的顶部,该情况得到解决。