我遇到了chrome自动填充行为的几个形式的问题。
表单中的字段都有非常常见和准确的名称，例如“email”、“name”或“password”，并且它们还设置了autocomplete=“off”。
自动完成标志已经成功禁用了自动完成行为，当你开始输入时，会出现一个下拉的值，但没有改变Chrome自动填充字段的值。
这种行为是可以的，除了chrome填充输入不正确，例如填充电话输入与电子邮件地址。客户抱怨过这个问题，所以它被证实在很多情况下都发生了，而不是我在我的机器上本地操作的某种结果。
目前我能想到的唯一解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖，改变自动填充行为，可以用来解决这个问题?
当前回答
Boom，谷歌Chrome和其他人尝试击败这然后。
我能够得到这个实现今天2017年9月7日，但使用在我的MVC视图中生成的随机字符串的FormCollection。
我会首先在我的登录页面的索引控制器中获得一个新的随机密钥，加密并创建一个新的完全唯一的随机字符串(我实际上使用了一个256位的cypher来执行此操作，以及一个唯一的cypher和认证密钥)，然后在每个字符串的末尾附加纯文本“用户名”和“密码”，以帮助我从响应视图控制器识别用户名和密码。你也可以把这个普通字符串改成任何东西，只要你知道它的模式并且它是唯一的。
在我看来，我然后适当地使用这些变量，然后在响应控制器中—通过FormCollection搜索并找到匹配的变量—然后使用该项的Key-Value作为相应的用户名和密码进行适当的处理。
The other issue i had which i think is sneaky of Chrome, is that any Any thoughts ? <style> @@font-face { font-family: 'password'; font-style: normal; font-weight: 400; src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf); } </style> <input type="text" name="@Model.UsernameRandomNameString" /> <input style="font-family: 'password'" type="text" name="@Model.PasswordRandomNameString" /> LogOnModel model = new LogOnModel() { UsernameRandomNameString = Cryptography.SimpleEncrypt("Username", UniqueGeneratorKey, UniqueGeneratorKey) + "Username", PasswordRandomNameString = Cryptography.SimpleEncrypt("Password", UniqueGeneratorKey, UniqueGeneratorKey) + "Password", }; I think it a hell of a workaround, but hey it works, and i think it could also be future proof unless google determines the URL of the page has key words in it, then appropriately just adds its stupid extensions on top on any input field - but that's a little drastic.
其他回答
我想我该把我的药发上去。发现你不能使用显示:没有，所以我想出了一个快速和肮脏的解决方案，只是使假输入小，并将其移出视线。到目前为止一切顺利，直到他们再次打破它。
<input id="FakePassword" type="password" style="float:left;position:relative;height:0;width:0;top:-1000px;/>
我的黑客测试在Chrome 48:
由于Chrome试图找出字段的类型，它是通过查看诸如id或名称属性的<输入>，但也在相关的<标签>内容，你只需要找到这些无意义的名字。
对于id和名称，很容易选择这里没有列出的其他内容。
对于标签，我在中间插入了一个不可见的<span>，例如对于一个城市(它会打乱我的位置自动完成):
<span>Ci<span style="display:none">*</span>ty</span>
完整的工作示例:
<!DOCTYPE html> <html> <body> <form method="post" action="/register"> <div> <label for="name">Name</label> <input id="name" type="text" name="name" /> </div> <div> <label for="email">Email</label> <input id="email" type="text" name="email" /> </div> <div> <label for="id1">City</label> <input id="id1" type="text" name="id1" /> <-- STILL ON :( </div> <div> <label for="id2">Ci<span style="display:none">*</span>ty</label> <input id="id2" type="text" name="id2" /> <-- NOW OFF :) </div> </form> </body> </html>
唯一适合我的方法是:(jQuery要求)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
我刚刚发现，如果你记住了一个网站的用户名和密码，当前版本的Chrome会自动填充你的用户名/电子邮件地址到任何type=password字段之前。它并不关心字段被称为什么-只是假设password之前的字段将是您的用户名。
旧的解决方案
只要使用<form autocomplete="off">，它就可以防止密码预填充以及基于浏览器可能做出的任何类型的启发式填充字段(这通常是错误的)。而不是使用<input autocomplete="off">，这似乎被密码自动填充忽略了(在Chrome中，Firefox确实遵守它)。
更新的解决方案
Chrome现在忽略<form autocomplete="off">。因此，我最初的解决方案(我已经删除了)现在非常流行。
简单地创建两个字段，并使用“display:none”隐藏它们。例子:
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display: none" type="text" name="fakeusernameremembered" />
<input style="display: none" type="password" name="fakepasswordremembered" />
然后把你真正的领域放在下面。
记得添加评论，否则你团队中的其他人会想知道你在做什么!
2016年3月更新
刚刚测试了最新的Chrome -一切都很好。这是一个相当古老的答案，但我想说的是，我们的团队已经在几十个项目中使用它很多年了。尽管下面有一些评论，但它仍然很好用。可访问性没有问题，因为字段是显示的:无意味着它们不会得到焦点。正如我提到的，你需要把它们放在你真正的领域之前。
如果使用javascript修改表单，还需要一个额外的技巧。在操作表单时显示假字段，然后在一毫秒后再次隐藏它们。
使用jQuery的示例代码(假设你给你的假字段一个类):
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
}, 1);
2018年7月更新
我的解决方案不再那么有效，因为Chrome的反可用性专家已经在努力工作。但他们给了我们一点好处:
<input type="password" name="whatever" autocomplete="new-password" />
这很有效，基本上解决了问题。
但是，当您没有密码字段而只有电子邮件地址时，它将不起作用。这也很难让它停止变黄和预填充。可以使用假字段解决方案来修复这个问题。
事实上，有时您需要放入两个假字段，并在不同的地方尝试它们。例如，我已经在我的表格的开头有假字段，但Chrome最近又开始预填充我的“电子邮件”字段-所以我加倍努力，在“电子邮件”字段之前放了更多的假字段，这就解决了问题。删除第一批或第二批字段将还原为不正确的过度自动填充。
更新 Mar 2020
目前尚不清楚这种解决方案是否以及何时仍然有效。它似乎有时仍然有效，但不是一直有效。
在下面的评论中，你会发现一些提示。@anilyeni刚刚添加的一个可能值得更多的研究:
正如我注意到的，autocomplete="off"在Chrome 80上工作，如果<form>中少于三个元素。我不知道它的逻辑是什么，也不知道它的相关文档在哪里。
还有来自@dubrox的这个可能是相关的，尽管我还没有测试过:
非常感谢你的技巧，但请更新答案，如下所示:无;不再工作，但位置:固定;顶部:-100px;左侧:-100px;宽度:5 px;:)
2020年4月更新
chrome的特殊值为这个属性正在做的工作:(在输入上测试-但不是由我) 自动完成= " chrome-off "
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中的自动填充信息可能是他们采取的必要行动。
