我遇到了chrome自动填充行为的几个形式的问题。

表单中的字段都有非常常见和准确的名称,例如“email”、“name”或“password”,并且它们还设置了autocomplete=“off”。

自动完成标志已经成功禁用了自动完成行为,当你开始输入时,会出现一个下拉的值,但没有改变Chrome自动填充字段的值。

这种行为是可以的,除了chrome填充输入不正确,例如填充电话输入与电子邮件地址。客户抱怨过这个问题,所以它被证实在很多情况下都发生了,而不是我在我的机器上本地操作的某种结果。

目前我能想到的唯一解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖,改变自动填充行为,可以用来解决这个问题?


当前回答

2022年4月:autocomplete="off"仍然不能在Chrome中工作,我不相信在查看了与此问题相关的Chromium bug后(可能只针对密码字段)。我看到2014年报告的问题被关闭为“WontFix”,问题仍然悬而未决,正在讨论[1][2]。据我所知,Chromium团队不相信有一个有效的用例autocomplete="off"。

总的来说,我仍然认为这两种极端策略(“总是尊重自动完成=关闭”和“从不尊重自动完成=关闭”)都是不好的。

https://bugs.chromium.org/p/chromium/issues/detail?id=914451#c66

他们的印象是,网站不会正确使用它,并决定不应用它,提出以下建议:

In cases where you want to disable autofill, our suggestion is to utilize the autocomplete attribute to give semantic meaning to your fields. If we encounter an autocomplete attribute that we don't recognize, we won't try and fill it. As an example, if you have an address input field in your CRM tool that you don't want Chrome to Autofill, you can give it semantic meaning that makes sense relative to what you're asking for: e.g. autocomplete="new-user-street-address". If Chrome encounters that, it won't try and autofill the field.

https://bugs.chromium.org/p/chromium/issues/detail?id=587466#c10

虽然这个“建议”目前对我来说是可行的,但它可能并不总是正确的,看起来团队正在进行实验,这意味着自动完成功能可能会在新版本中改变。

我们不得不求助于这个是愚蠢的,但唯一可靠的方法是尽可能地迷惑浏览器:

在不向浏览器泄露任何信息的情况下为输入命名,例如id="field1"而不是id="country"。 设置autocomplete="do-not-autofill",基本上使用任何不会让浏览器识别为可自动填充字段的值。


2021年1月:autocomplete="off"现在按预期工作(在Chrome 88 macOS上测试)。

要做到这一点,请确保input标记位于Form标记中


2020年9月:autocomplete=" Chrome -off"禁用Chrome自动填充功能。


原答案,2015年:

对于新版本的Chrome浏览器,你只需要在密码栏中输入autocomplete="new-password"就可以了。我检查过了,工作正常。

在这次讨论中,我从Chrome开发者那里得到了一个建议: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

P.S. Note that Chrome will attempt to infer autofill behavior from name, id and any text content it can get surrounding the field including labels and arbitrary text nodes. If there is a autocomplete token like street-address in context, Chrome will autofill that as such. The heuristic can be quite confusing as it sometimes only trigger if there are additional fields in the form, or not if there are too few fields in the form. Also note that autocomplete="no" will appear to work but autocomplete="off" will not for historical reasons. autocomplete="no" is you telling the browser that this field should be auto completed as a field called "no". If you generate unique random autocomplete names you disable auto complete.

如果你的用户访问了不好的表单,他们的自动填充信息可能会被损坏。让他们手动进入并修复Chrome中的自动填充信息可能是他们采取的必要行动。

其他回答

除了autocomplete="off"外,还必须将值设置为空(value="")才能使其工作。

这是如此简单和棘手:)

谷歌chrome基本上会搜索<form>, <body>和<iframe>标签内的每个第一个可见密码元素,以启用自动填充,因此要禁用此功能,您需要添加一个虚拟密码元素,如下所示:

if your password element inside a <form> tag you need to put the dummy element as the first element in your form immediately after <form> open tag if your password element not inside a <form> tag put the dummy element as the first element in your html page immediately after <body> open tag You need to hide the dummy element without using css display:none so basically use the following as a dummy password element. <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>

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

将readonly属性添加到标记中,同时删除onfocus事件,可以修复该问题

2022年4月:autocomplete="off"仍然不能在Chrome中工作,我不相信在查看了与此问题相关的Chromium bug后(可能只针对密码字段)。我看到2014年报告的问题被关闭为“WontFix”,问题仍然悬而未决,正在讨论[1][2]。据我所知,Chromium团队不相信有一个有效的用例autocomplete="off"。

总的来说,我仍然认为这两种极端策略(“总是尊重自动完成=关闭”和“从不尊重自动完成=关闭”)都是不好的。

https://bugs.chromium.org/p/chromium/issues/detail?id=914451#c66

他们的印象是,网站不会正确使用它,并决定不应用它,提出以下建议:

In cases where you want to disable autofill, our suggestion is to utilize the autocomplete attribute to give semantic meaning to your fields. If we encounter an autocomplete attribute that we don't recognize, we won't try and fill it. As an example, if you have an address input field in your CRM tool that you don't want Chrome to Autofill, you can give it semantic meaning that makes sense relative to what you're asking for: e.g. autocomplete="new-user-street-address". If Chrome encounters that, it won't try and autofill the field.

https://bugs.chromium.org/p/chromium/issues/detail?id=587466#c10

虽然这个“建议”目前对我来说是可行的,但它可能并不总是正确的,看起来团队正在进行实验,这意味着自动完成功能可能会在新版本中改变。

我们不得不求助于这个是愚蠢的,但唯一可靠的方法是尽可能地迷惑浏览器:

在不向浏览器泄露任何信息的情况下为输入命名,例如id="field1"而不是id="country"。 设置autocomplete="do-not-autofill",基本上使用任何不会让浏览器识别为可自动填充字段的值。


2021年1月:autocomplete="off"现在按预期工作(在Chrome 88 macOS上测试)。

要做到这一点,请确保input标记位于Form标记中


2020年9月:autocomplete=" Chrome -off"禁用Chrome自动填充功能。


原答案,2015年:

对于新版本的Chrome浏览器,你只需要在密码栏中输入autocomplete="new-password"就可以了。我检查过了,工作正常。

在这次讨论中,我从Chrome开发者那里得到了一个建议: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

P.S. Note that Chrome will attempt to infer autofill behavior from name, id and any text content it can get surrounding the field including labels and arbitrary text nodes. If there is a autocomplete token like street-address in context, Chrome will autofill that as such. The heuristic can be quite confusing as it sometimes only trigger if there are additional fields in the form, or not if there are too few fields in the form. Also note that autocomplete="no" will appear to work but autocomplete="off" will not for historical reasons. autocomplete="no" is you telling the browser that this field should be auto completed as a field called "no". If you generate unique random autocomplete names you disable auto complete.

如果你的用户访问了不好的表单,他们的自动填充信息可能会被损坏。让他们手动进入并修复Chrome中的自动填充信息可能是他们采取的必要行动。

纯HTML解决方案:

(不需要javascript,不需要css,不需要隐藏输入)

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

注:

表单不一定是输入元素的直接父元素 Input需要一个name属性