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.

如果表单是通过javascript生成的，那么通过在输入中添加“display: none;”来隐藏它的方法对我来说就行不通了。

所以我把它们放在视线之外，让它们隐形:

<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="text" name="fakeusernameremembered"/>
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="password" name="fakepasswordremembered"/>

为用户名字段输入值' '(空格)。

<input type = 'text' value = ' ' name = 'username' />

如果您曾经用用户输入的值填充用户名，如果没有用户输入的值，则编码输入' '。

编辑:我还不得不改变'用户名'字段有一个其他的名字，而不是'用户名'，例如。“nameofuser”

有时即使autocomplete=off也不能防止在错误的字段中填写凭据。

一个解决方法是禁用浏览器自动填充使用只读模式，并设置可写焦点:

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

焦点事件发生在鼠标单击和通过字段的选项卡时。

更新:

Mobile Safari在字段中设置光标，但不显示虚拟键盘。这个新的解决方案像以前一样工作，但处理虚拟键盘:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示https://jsfiddle.net/danielsuess/n0scguv6/

/ / UpdateEnd

解释:浏览器自动填充凭据错误的文本字段?

错误地填充输入，例如用电子邮件地址填充电话输入

有时我在Chrome和Safari浏览器上注意到这种奇怪的行为，当密码字段以相同的形式出现时。我猜，浏览器会寻找一个密码字段来插入您保存的凭证。然后它自动将用户名填充到最近的textlike输入字段，在DOM中出现在密码字段之前(只是由于观察而猜测)。由于浏览器是最后一个实例，你无法控制它，

上面的这个即时修复对我来说是有效的。

我刚刚发现，如果你记住了一个网站的用户名和密码，当前版本的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 "

试试下面对我有用的jQuery代码。

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}