我在几种表单上遇到了chrome自动填充行为的问题。
表单中的字段都有非常常见且准确的名称，例如“email”，“name”或“password”，并且还设置了autocomplete="off"。
自动填充标记已成功禁用自动填充行为，其中在您开始输入时会显示值下拉列表，但未更改Chrome自动填充字段的值。
除了Chrome正确填充输入外，这种行为没有问题，例如用电子邮件地址填写电话输入。客户抱怨这一点，因此经过验证可以在多种情况下进行验证，而不是因为我在我的机器上本地完成了某些事情。
我能想到的唯一解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是解决此问题的一种非常糟糕的方式。是否有任何标签或怪癖会改变可用于解决此问题的自动填充行为？
答案 0 :(得分：728)
对于新的Chrome版本，您只需将autocomplete="new-password"放入密码字段即可。我已经检查过，工作正常。
在此讨论中获得Chrome开发人员的提示： https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
P.S。不要忘记为不同字段使用唯一名称以防止自动填充。
答案 1 :(得分：589)
我刚刚发现，如果您有一个记住的网站用户名和密码，当前版本的Chrome会自动将您的用户名/电子邮件地址自动填入字段之前type=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测试 - 一切都很好。现在这是一个相当古老的答案，但我想提一下，我们的团队已经在数十个项目中使用它多年了。尽管下面有一些评论，它仍然很好用。可访问性没有问题，因为字段为display:none，这意味着它们无法获得焦点。正如我所提到的，你需要将它们放在之前你的真实领域。
如果您使用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最近再次开始预填充我的“电子邮件”字段 - 然后我在“电子邮件”字段之前加倍填写更多假字段，并修复了它。删除第一个或第二个字段将恢复为不正确的过度自动填充。
答案 2 :(得分：216)
经过数月和数月的努力，我发现解决方案比你想象的要简单得多：
而不是autocomplete="off"使用 autocomplete="false" ;）
就这么简单，它也像谷歌Chrome中的魅力一样！
答案 3 :(得分：96)
有时即使autocomplete=off也不会阻止将凭据填入错误的字段。
解决方法是使用只读模式禁用浏览器自动填充并在焦点上设置可写：
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
focus事件发生在鼠标点击和标记字段时。
更新
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-input字段中，该字段出现在DOM中的密码字段之前（仅因为观察而猜测）。由于浏览器是最后一个实例，您无法控制它，
上面的readonly-fix对我有用。
答案 4 :(得分：61)
试试这个。我知道这个问题有些陈旧，但对于这个问题，这是一种不同的方法。
我也注意到问题出现在password字段上方。
我尝试了两种方法，如
<form autocomplete="off">和<input autocomplete="off">，但这些都不适合我。
所以我使用下面的代码修改了它 - 只是在密码类型字段上方添加了另一个文本字段并将其设为display:none。
这样的事情：
<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />
希望它会对某人有所帮助。
答案 5 :(得分：51)
如果您要实施搜索框功能，请尝试将type属性设置为search，如下所示：
<input type="search" autocomplete="off" />
这对我在Chrome v48上很有用，似乎是合法的标记：
答案 6 :(得分：44)
我不知道为什么，但这对我有帮助和帮助。
<input type="password" name="pwd" autocomplete="new-password">
我不知道为什么，但 autocompelete =“new-password”会禁用自动填充功能。它适用于最新的 49.0.2623.112 chrome版本。
答案 7 :(得分：43)
对我而言，简单
<form autocomplete="off" role="presentation">
做到了。
在多个版本上测试，最后一次尝试是在56.0.2924.87
答案 8 :(得分：22)
答案 9 :(得分：19)
这是如此简单和棘手：）
谷歌浏览器基本上在<form>，<body>和<iframe>标记内搜索每个第一个可见的密码元素，以启用它们的自动重新填充，以便禁用这需要添加一个虚拟密码元素，如下所示：
如果<form>标记内的密码元素需要在<form>打开标记后立即将虚拟元素作为表单中的第一个元素
如果您的密码元素不在<form>标记内，则在<body>打开标记后立即将虚拟元素作为html页面中的第一个元素
您需要隐藏虚拟元素而不使用css display:none所以基本上使用以下作为虚拟密码元素。
<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
答案 10 :(得分：17)
以下是我提出的解决方案，因为谷歌坚持要覆盖人们似乎做出的每一项解决方案。
将输入的值设置为您的用户的示例（例如your@email.com）或字段的标签（例如Email），并将一个名为focus-select的类添加到您的输入：
<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">
这是jQuery：
$(document).on('click', '.focus-select', function(){
$(this).select();
});
我真的看不到Chrome曾经搞砸过价值观。那太疯狂了。所以希望这是一个安全的解决方案。
假设您有两个输入，例如电子邮件和密码，请将电子邮件字段的值设置为" "（空格）并添加属性/值autocomplete="off"，然后使用JavaScript清除它。 您可以将密码值留空。
如果用户由于某种原因没有使用JavaScript，请确保修改其输入服务器端（无论如何都应该这样），以防他们不删除空格。
这是jQuery：
$(document).ready(function() {
setTimeout(function(){
$('[autocomplete=off]').val('');
}, 15);
});
我将超时设置为15因为5似乎偶尔在我的测试中工作，因此这个数字的重叠似乎是一个安全的赌注。
未能将初始值设置为空格会导致Chrome将输入视为黄色，就好像它已自动填充它一样。
把它放在表格的开头：
<!-- Avoid Chrome autofill -->
<input name="email" class="hide">
CSS：
.hide{ display:none; }
确保您保留HTML注释，以便其他开发人员不会删除它！还要确保隐藏输入的名称是相关的。
答案 11 :(得分：14)
在某些情况下，即使autocomplete属性设置为off，浏览器也会继续建议自动完成值。对于开发人员来说，这种意想不到的行为非常令人费解真正强制非自动完成的技巧是为属性分配随机字符串，例如：
autocomplete="nope"
答案 12 :(得分：12)
我发现将其添加到表单会阻止Chrome使用自动填充功能。
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>
在这里找到。 https://code.google.com/p/chromium/issues/detail?id=468153#hc41
非常令人失望的是Chrome已经确定它比开发人员更了解何时自动完成。有一个真正的微软感觉。
答案 13 :(得分：11)
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
向标签添加readonly属性以及删除它的onfocus事件可以解决问题
答案 14 :(得分：9)
对于用户名密码组合，这是一个很容易解决的问题。 Chrome启发式查找模式：
<input type="text">
接下来是：
<input type="password">
通过使此无效来打破此过程：
<input type="text">
<input type="text" onfocus="this.type='password'">
答案 15 :(得分：8)
Mike Nelsons提供的解决方案在Chrome 50.0.2661.102 m中对我无效。 只需使用display：none set添加相同类型的输入元素，就不再禁用本机浏览器自动完成。现在需要复制要禁用自动完成的输入字段的name属性。
此外，为了避免输入字段在表单元素中重复，您应该在未显示的元素上放置禁用。这将阻止该元素作为表单操作的一部分提交。
<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
答案 16 :(得分：8)
使用css text-security：disc 而不使用 type = password 。
HTML
<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />
or
<form autocomplete='off'>
<input type='text' name='user' />
<input type='text' name='pass' class='secure' />
</form>
CSS
input.secure {
text-security: disc;
-webkit-text-security: disc;
}
答案 17 :(得分：7)
如果您在保留占位符方面遇到问题但是停用了Chrome自动填充功能，我发现了这种解决方法。
<强>问题
HTML
<div class="form">
<input type="text" placeholder="name"><br>
<input type="text" placeholder="email"><br>
<input type="text" placeholder="street"><br>
</div>
http://jsfiddle.net/xmbvwfs6/1/
上面的示例仍然会产生自动填充问题，但是如果您使用required="required"和一些CSS，则可以复制占位符，而Chrome则无法获取标记。
<强>解决方案
HTML
<div class="form">
<input type="text" required="required">
<label>Name</label>
<br>
<input type="text" required="required">
<label>Email</label>
<br>
<input type="text" required="required">
<label>Street</label>
<br>
</div>
CSS
input {
margin-bottom: 10px;
width: 200px;
height: 20px;
padding: 0 10px;
font-size: 14px;
}
input + label {
position: relative;
left: -216px;
color: #999;
font-size: 14px;
}
input:invalid + label {
display: inline-block;
}
input:valid + label {
display: none;
}
答案 18 :(得分：6)
好吧，因为我们都有这个问题，所以我花了一些时间为这个问题编写一个有效的jQuery扩展。 Google必须遵循HTML标记，而不是我们关注Google
(function ($) {
"use strict";
$.fn.autoCompleteFix = function(opt) {
var ro = 'readonly', settings = $.extend({
attribute : 'autocomplete',
trigger : {
disable : ["off"],
enable : ["on"]
},
focus : function() {
$(this).removeAttr(ro);
},
force : false
}, opt);
$(this).each(function(i, el) {
el = $(el);
if(el.is('form')) {
var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
el.find('input').autoCompleteFix({force:force});
} else {
var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
if (settings.force && !enabled || disabled)
el.attr(ro, ro).focus(settings.focus).val("");
}
});
};
})(jQuery);
只需将其添加到 /js/jquery.extends.js 等文件中，并将其包含在jQuery之后。 将其应用于文档加载时的每个表单元素，如下所示：
$(function() {
$('form').autoCompleteFix();
});
答案 19 :(得分：6)
2016年，谷歌Chrome开始忽略autocomplete=off，尽管它在W3C中。 The answer they posted：
这里棘手的部分是，在网络自动完成=关闭的某个地方的某个地方成为许多表单字段的默认设置，没有任何真实的想法是否对用户有益。这并不意味着没有非常有效的情况，您不希望浏览器自动填充数据（例如在CRM系统上），但总的来说，我们将这些视为少数情况。因此，我们开始忽略Chrome自动填充数据的autocomplete = off。
基本上说：我们更清楚用户想要的东西。
They opened another bug to post valid use cases when autocomplete=off is required
我没有在我的所有B2B应用程序中看到与自动完成相关的问题，只是输入了密码类型。
如果屏幕上有任何密码字段，即使是隐藏密码字段，也会自动填写。 要打破这种逻辑，你可以将每个密码字段放入它自己的表单中，如果它没有破坏你自己的页面逻辑。
<input type=name >
<form>
<input type=password >
</form>
答案 20 :(得分：6)
这有两件事。 Chrome和其他浏览器会记住以前输入的字段名称值，并根据该值向用户提供自动填充列表（特别是，密码类型输入从未以这种方式记住，原因相当明显）。您可以添加autocomplete="off"以防止出现此类问题，例如您的电子邮件字段。
然而，您有密码填充程序。大多数浏览器都有自己的内置实现，并且还有许多提供此功能的第三方实用程序。这个，你不能停止。这是用户自己选择保存此信息以便以后自动填写，并且完全超出了应用程序的范围和影响范围。
答案 21 :(得分：6)
我真的不喜欢制作隐藏的字段，我认为制作它会让它变得非常混乱。
在您要停止自动完成的输入字段中，这将起作用。使字段只读并在焦点上删除该属性，如
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
这样做首先要通过选择字段来删除只读属性，此时最有可能您将填充自己的用户输入并加入自动填充< / strong>接管
答案 22 :(得分：5)
尝试以下适用于我的jQuery代码。
if ($.browser.webkit) {
$('input[name="password"]').attr('autocomplete', 'off');
$('input[name="email"]').attr('autocomplete', 'off');
}
答案 23 :(得分：5)
根据Chromium bug report #352347 Chrome不再尊重autocomplete="off|false|anythingelse"，无论是表单还是输入。
对我有用的唯一解决方案是添加虚拟密码字段：
<input type="password" class="hidden" />
<input type="password" />
答案 24 :(得分：5)
这是一个肮脏的黑客 -
这里有你的元素（添加disabled属性）：
<input type="text" name="test" id="test" disabled="disabled" />
然后在你网页的底部放了一些JavaScript：
<script>
setTimeout(function(){
document.getElementById('test').removeAttribute("disabled");
},100);
</script>
答案 25 :(得分：5)
不同的解决方案，基于webkit。如前所述，只要Chrome找到密码字段，它就会自动填充电子邮件。 AFAIK，这与autocomplete = [无论如何]无关。
要绕过此操作，请将输入类型更改为文本，并以您想要的任何形式应用webkit安全字体。
.secure-font{
-webkit-text-security:disc;}
<input type ="text" class="secure-font">
从我所看到的，这至少与输入类型=密码一样安全，它的复制和粘贴安全。然而，通过删除将删除星号的样式很容易，当然输入类型=密码可以很容易地更改为控制台中的输入类型=文本以显示任何自动填充的密码，所以它真的很相似。
答案 26 :(得分：5)
以前输入的由chrome缓存的值显示为下拉列表选择列表。可以通过autocomplete = off禁用此功能，在Chrome的高级设置中显式保存的地址会在地址字段获得焦点时自动填充弹出窗口。这可以通过autocomplete =禁用“false”。但它允许chrome在下拉列表中显示缓存值。
在输入html字段后面将关闭两者。
Role="presentation" & autocomplete="off"
在为地址自动填充选择输入字段时，Chrome会忽略那些没有前面标签html元素的输入字段。
为确保chrome解析器忽略自动填充地址弹出的输入字段，可以在标签和文本框之间添加隐藏按钮或图像控件。这将打破自动填充的标签 - 输入对创建的chrome解析序列。 解析地址字段时忽略复选框
Chrome还会在label元素上考虑“for”属性。它可以用来破解chrome的解析序列。
答案 27 :(得分：4)
我遇到了同样的问题。以下是禁用自动填充用户名和解决方案的解决方案。 Chrome上的密码（仅使用Chrome测试）
<!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
<input type="tel" hidden />
<input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">
答案 28 :(得分：4)
对我有用的唯一方法是:(需要jQuery）
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
答案 29 :(得分：4)
而不是＆＃34;这对我有用＃34;答案和其他答案看起来像完整的黑客...这是目前chrome（和最新的规范）将如何处理autocomplete元素的input属性：
https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=en
TLDR：在您的输入上添加autocomplete='<value>'，其中<value>应该是定义字段用途的任何字符串。这与name属性的工作方式类似。尽可能使用上面链接中的建议值。
此外，从表单中删除自动填充属性
答案 30 :(得分：3)
尝试在值中填空空格：
<input type="email" name="email" value=" ">
<input type="password" name="password" value=" ">
chrome 54.0.2840.59
答案 31 :(得分：2)
我终于使用textarea找到了成功。对于密码字段，有一个事件处理程序，用于替换用＆＃34;•＆＃34;键入的每个字符。
答案 32 :(得分：2)
我的解决方法，因为以上所有内容似乎都无法在Chrome 63及更高版本中使用
我通过用
替换有问题的输入元素在我的网站上修复了这个问题<p class="input" contenteditable="true"> </p>
并使用jQuery在提交之前填充隐藏字段。
但是，这是一个非常糟糕的黑客攻击，因为Chromium做出了错误的决定。
答案 33 :(得分：2)
将autocomplete="new-password"添加到密码字段的最新解决方案非常适合阻止Chrome自动填充。
然而，正如sibbl指出的那样，这并不妨碍Chrome在表单提交完成后要求您保存密码。从Chrome 51.0.2704.106开始，我发现您可以通过添加一个也具有属性autocomplete="new-password"的隐藏虚拟密码字段来实现此目的。请注意，“display：none”在这种情况下不起作用。例如在真实密码字段之前添加类似的内容：
<input type="password" autocomplete="new-password"
style="visibility:hidden;height:0;width:1px;position:absolute;left:0;top:0">`
当我将宽度设置为非零值时，这仅适用于我。感谢tibalt和fareed namrouti的原始答案。
答案 34 :(得分：1)
在Chromium 53.0.2785.92（64位）上，以下工作
<div style="visibility:hidden">
<input type="text" name="fake_username_remembered">
<input type="password" name="fake_password_remembered">
</div>
display:none不起作用
答案 35 :(得分：1)
如果display: none不起作用，这也是可行的，而且它似乎有效（Chrome v60.0.3112.113）：
.hidden-fields {
opacity: 0;
float: left;
height: 0px;
width: 0px;
}
<input type="text" name="username" class="hidden-fields">
<input type="password" name="password" class="hidden-fields">
<your actual login fields></your actual login fields>
答案 36 :(得分：1)
轰隆，谷歌Chrome和其他任何人都试图打败这个。
我能够在2017年9月7日实现此功能，但使用在我的MVC视图中生成的随机字符串的FormCollection。
我首先在我的登录页面的索引控制器中获得一个新的随机密钥，加密并创建一个新的完全唯一的随机字符串（我实际上使用256位密码执行此操作，以及一个唯一的密码和身份验证密钥），然后我在每个字符串的末尾添加纯文本“用户名”和“密码”，以便稍后帮助我从repsonding视图控制器中识别用户名和密码。只要您知道模式并且它是唯一的，您也可以将该普通字符串更改为任何内容。
在我看来，我然后适当地使用这些变量，然后在响应控制器中 - 通过FormCollection搜索并找到我的匹配变量 - 然后使用该项的Key-Value作为相应的用户名和密码进行适当处理。
我认为另一个问题是Chrome浏览器，这是任何问题
有什么想法吗？
<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",
};
我认为这是一个变通的办法，但是嘿它有效，我认为它也可能是未来的证据，除非谷歌确定页面的网址中有关键词，然后恰当地将其愚蠢的扩展添加到顶部任何输入字段 - 但这有点激烈。
答案 37 :(得分：1)
我的解决方案取决于三件事：
首先，我们需要阻止用户名和密码的自动完成，因此，最初我们将设置两个标志，i - ＆gt;用户名和j - ＆gt; passowrd具有真值，因此在没有任何keydown字段的情况下，i和j都将为真。
在可能的情况下，在服务器端发生字段屏蔽，通过传递随机字符串，也可以使用客户端轻松制作。
这是代码：
$(document).ready(function(){
i= true; //username flag
j= true; // password flag
$("#username{{$rand}}").keydown(function(e){
// {{$rand}} is server side value passed in blade view
// keyboard buttons are clicked in the field
i = false;
});
$("#passowrd{{$rand}}").keydown(function(e){
// {{$rand}} is server side value passed in blade view
// keyboard buttons are clicked in the field
j = false;
});
// Now we will use change event,
$("#username{{$rand}}").change(function(){
if($(this).val() != ''){ //the field has value
if(i){ // there is no keyboard buttons clicked over it
$(this).val(''); // blank the field value
}
}
})
$("#password{{$rand}}").change(function(){
if($(this).val() != ''){ // the same as username but using flag j
if(j){
$(this).val('');
}
}
})
$("#sForm").submit(function(e){ // the id of my form
$("#password-s").val($("#password{{$rand}}").val());
$("#username-s").val($("#username{{$rand}}").val());
// Here the server will deal with fields names `password` and `username` of the hidden fields
$("#username{{$rand}}").val('');
$("#password{{$rand}}").val('');
})
})
以下是HTML：
<form class="form-horizontal" autocomplete="off" role="form" id="sForm" method="POST" action="https://example.com/login">
<input type="hidden" name="password" id="password-s">
<input type="hidden" name="username" id="username-s">
<label for="usernameTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Username</label>
<input id="usernameTDU3m4d3I5" placeholder="Username" autocomplete="off" style="border-bottom-left-radius: 10px; border-top-right-radius: 10px; font-family: fixed; font-size: x-large;" type="text" class="form-control" name="usernameTDU3m4d3I5" value="" required="required" autofocus="">
<label for="passwordTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Password</label>
<input id="passwordTDU3m4d3I5" placeholder="Password" autocomplete="off" type="password" class="form-control" name="pa-TDU3m4d3I5" required="">
<button type="submit" class="btn btn-success">
<i class="fox-login" style="text-shadow: 0px 1px 0px #000"></i><strong>Login</strong>
</button>
</form>
上述解决方案确实不会消除或阻止用户名和密码的自动完成，但它会使自动完成无效。即在没有按字段键盘按钮的情况下，字段值在提交前将为空白，因此将要求用户输入它们。
我们还可以使用点击事件来阻止用户列表中的自动填充列表，如下所示：
$("#username{{$rand}}").click(function(){
$(this).val('');
i = true;
})
$("#password{{$rand}}").click(function(){
$(this).val('');
j = true;
})
此解决方案可能在触摸屏设备中无法正常工作。
我已完成以下干净实施，如下所示：
preventAutoComplete = true; // modifier to allow or disallow autocomplete
trackInputs = {password:"0", username:"0"}; //Password and username fields ids as object's property, and "0" as its their values
// Prevent autocomplete
if(preventAutoComplete){
$("input").change(function(e){ // Change event is fired as autocomplete occurred at the input field
trackId = $(this).attr('id'); //get the input field id to access the trackInputs object
if (trackInputs[trackId] == '0' || trackInputs[trackId] != $(this).val()){ //trackInputs property value not changed or the prperty value ever it it is not equals the input field value
$(this).val(''); // empty the field
}
});
$("input").keyup(function(e){
trackId = $(this).attr('id');
trackInputs[trackId] = $(this).val(); //Update trackInputs property with the value of the field with each keyup.
});
}
答案 38 :(得分：1)
我需要一些额外的字段才能正常工作，因为chrome实际上填充了许多字段。而且我还需要以比显示更奇特的方式隐藏字段：没有它实际工作。
<style>.stylish { position:absolute; top:-2000px; }</style>
<input id="_____fake_email_remembered" class="stylish" tabindex="-1" type="email" name="email_autofill"/>
<input id="_____fake_userName_remembered" class="stylish" tabindex="-1" type="text" name="userName_autofill"/>
<input id="_____fake_firstName_remembered" class="stylish" tabindex="-1" type="text" name="firstName_autofill"/>
<input id="_____fake_lastName_remembered" class="stylish" tabindex="-1" type="text" name="lastName_autofill"/>
<input id="_____fake_phone_remembered" class="stylish" tabindex="-1" type="text" name="phone_autofill"/>
<input id="_____fake_address_remembered" class="stylish" tabindex="-1" type="text" name="address_autofill"/>
<input id="_____fake_password_remembered" class="stylish" tabindex="-1" type="password" name="password_autofill"/>
<input id="_____fake_password_remembered2" class="stylish" tabindex="-1" type="password" name="passwordRepeated_autofill"/>
答案 39 :(得分：1)
最后，我想我找到了一个不错的解决方案。更好地了解下拉列表如何与Chrome配合使用有帮助:)基本上，当您输入焦点输入时以及当您键入与Chrome在内存中匹配的条目时生成鼠标按下事件时，将显示下拉列表。记住这一点，并且当Chrome有默认名称（例如＆＃34; name＆＃34;，＆＃34; email＆＃34;等）时Chrome会为某些输入执行此操作，那么我们只需要在下拉列表中删除该名称将要显示并在:)之后将其添加回来。我想使用一个解决方案，只需添加自动完成属性即可使其工作。我觉得这很有道理。这是代码：
解决方案1
jQuery('body').on('mousedown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName =="undefined")
this.currentName=jQuery(this).attr('name');
jQuery(this).attr('name','');
});
jQuery('body').on('blur','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
jQuery(this).attr('name',this.currentName);
});
解决方案2（我最喜欢的一个）
我上面描述的解决方案将删除输入的名称，直到我们删除焦点（模糊），在那一刻它会将原始名称放回原处。但可能会发生我们感兴趣的是在我们输入时通过其name属性访问输入。这意味着我们需要在每次输入后立即返回名称。这个解决方案基本上是基于第一个解决方案。在这种情况下，我们将在键上添加名称，并将其放回到键盘上。我认为这与＆＃34;自动完成关闭＆＃34;的兼容性更加整洁。行为应该是。无论如何这是代码：
jQuery('body').on('mousedown keydown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName =="undefined")
this.currentName=jQuery(this).attr('name');
jQuery(this).attr('name','');
});
jQuery('body').on('blur keyup','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName !="undefined")
jQuery(this).attr('name',this.currentName);
});
请注意，对于解决方案1和解决方案2，我只考虑了输入名称为＆＃34; name＆＃34;和＆＃34;电子邮件＆＃34;。对于此属性使Chrome生成下拉列表的任何其他情况，您必须将其添加到鼠标按下事件的选择器中。
解决方案3
这个解决方案更加混乱。我没有意识到我们试图纠正的行为只是基于那些具有特定名称的输入，例如＆＃34;姓名，电子邮件等＆＃34;。此解决方案的方法是针对这种情况，Chrome显示我们不了解先验的其他名称。这将是一个非常通用的解决方案。我不喜欢其他2，主要是因为当我们按下删除键时可能会有一个小的闪烁。我会解释一下。
我发现第二次单击输入后出现下拉列表，但第一次将焦点放在输入上时，第一次单击时没有出现下拉列表。我绑定了一个＆＃34; mousedown＆＃34;所有这些元素的事件，其中处理程序基本上检测它是否已经集中在输入上，如果它检测到另一个＆＃34;鼠标按下＆＃34;，强制一个.blur（）然后.focus（）之后，阻止一旦聚焦，第二次单击下拉。我希望，很明显，以防这里是我使用的代码：
jQuery('body').on('mousedown','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(jQuery(this).is(':focus')) {
jQuery(this).blur();
jQuery(this).focus();
}
});
另一方面，为了防止在您输入时下拉，以防它与Chrome建议相符...这有点棘手。我刚刚决定在用户输入时替换输入的默认行为。下拉列表评估鼠标按下时的输入，因此我会阻止字母数字，空格等的默认行为。唯一的问题是Command，Ctrl和delete。对于这种情况，我不得不在鼠标上绑定一个事件。它允许前两种情况下的默认行为，因此您可以进行复制，粘贴或全选。在删除的情况下，我必须允许默认行为，但如果在删除字符后输入与Chrome建议匹配，则再次显示下拉列表。对于这种情况，我不得不使用相同的模糊和焦点技巧。我发现的唯一不便是因为我们取消了keyup上的行为，并且chrome试图在keydown上显示它，所以有一个小的闪烁。无论如何，这是我能做的最好的事情。可能需要在一个点上过滤字符。我刚才添加了更有意义的条件。这是代码的第二部分：
jQuery('body').on('keydown','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
var ctrlKey = 17,cmKey = 91;
var charCode = e.which || e.keyCode;
if(charCode!=16 && this.commandDown != true && this.ctrlDown != true && ((charCode>47 && charCode<58)||(charCode>64 && charCode<91)||(charCode>96 && charCode<123)||charCode==0 || charCode==32)){
e.preventDefault();
var charStr = String.fromCharCode(charCode);
if(!e.shiftKey)
charStr = charStr.toLowerCase(charStr);
$(this).val($(this).val() + charStr);
}else{
if (charCode == cmKey) this.commandDown = true;
if (charCode == ctrlKey) this.ctrlDown = true;
}
});
jQuery('body').on('keyup','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
var allowed=[8];//Delete
var ctrlKey = 17,cmKey = 91;
var charCode = e.which || e.keyCode;
if (charCode == cmKey) {this.commandDown = false};
if (charCode == ctrlKey) {this.ctrlDown = false};
if(allowed.indexOf(charCode)>=0 || (this.commandDown!=false && this.ctrlDown!=false)){
jQuery(this).blur();
jQuery(this).focus();
}
正如我所说，这个解决方案更加混乱。这是我使用的第一个，直到我意识到某些输入名称出现了下拉列表。
很抱歉写这么多，我只是想确保一切都很清楚。我希望它有所帮助。
答案 40 :(得分：1)
对于Angular用户：
由于autocomplete = 'off'忽略了新的Chrome版本，因此Chrome开发人员建议使用autocomplete =＆＃39; false |随机字符串＆＃39;，因此Google Chrome /现代浏览器有2种类型的用户帮助 -
autocomplete='off'（会阻止上次缓存的建议）。autocomplete = 'false | random-string'（会阻止自动填充设置，因为浏览器不知道＆＃39;随机字符串＆＃39;。
那么该怎么办，如果禁用这两个恼人的建议？ 这是诀窍： -
autocomplete = 'off'。
（或简单的Jquery）。 示例：$("input").attr('autocomplete', 'off');
<form name='form-name'>代码，并在ng-form = 'form-name'容器中添加<div>。
添加ng-form="form-name"也会保留所有验证。答案 41 :(得分：1)
显然，针对此的最佳修复/黑客现在再次无法正常工作。我使用的Chrome版本是版本49.0.2623.110 m，我的帐户创建表单现在显示保存的用户名和密码，与表单无关。谢谢Chrome！其他黑客看起来很可怕，但这个黑客不那么可怕......
为什么我们需要这些黑客工作是因为这些表格通常是帐户创建表格，即不应该允许填写密码的登录表格。帐户创建表单您不希望删除用户名和密码的麻烦。逻辑上，这意味着永远不会在渲染时填充密码字段。所以我使用文本框以及一些javascript。
<input type="text" id="password" name="password" />
<script>
setTimeout(function() {
$("#password").prop("type", "password");
}, 100);
// time out required to make sure it is not set as a password field before Google fills it in. You may need to adjust this timeout depending on your page load times.
</script>
我觉得这是可以接受的，因为用户不会在短时间内到达密码字段，如果该字段是密码字段，则回发到服务器没有区别，因为无论如何它都是以纯文本形式发送的。
警告： 如果像我一样使用相同的创建形式作为更新表单，那么事情可能会变得棘手。我使用mvc.asp c＃，当我使用@ Html.PasswordFor（）时，密码不会添加到输入框中。这是一件好事。我已编码了这个。但是使用@ Html.TextBoxFor（）和密码将被添加到输入框中，然后作为密码隐藏。但是，当我的密码被删除时，输入框中的密码是哈希密码，不应该被发回服务器 - 不小心保存哈希哈希密码对于尝试登录的人来说会很痛苦。基本上...... 。如果使用此方法，请记住在呈现输入框之前将密码设置为空字符串。
答案 42 :(得分：1)
就像Dvd Franco所说，对我来说只是把automplete =＆＃39; off＆＃39;在所有领域都有效。所以我把这个jquery规则放在$（document）.ready（）;功能在我的主.js文件
$('form.no_autofill').attr('autocomplete','off');
$('.no_autofill input').attr('autocomplete','off');
答案 43 :(得分：0)
如果您使用的是Symfony表单，如果从树枝模板应用属性而不是使用autocomplete=off，则FormBuilder将无效。
使用此：
....
->add('field-name', TextType::class, array(
'attr' => array(
'autocomplete' => 'off'
)
)
....
而不是：
....
{{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....
答案 44 :(得分：0)
我做了什么来改变输入类型=＆＃34; text＆＃34;到多线输入即。
overflow-x:hidden;
overflow-y:hidden;
vertical-align:middle;
resize: none;
代码的快速解释：overflow-x和-y hidden wil禁用textarea框右侧的滚动按钮。垂直algin将使标签垂直中间与文本区域对齐，并且resize：none将禁用textarea右下角的调整大小抓取器。
在essance中，这意味着您的textarea将显示为文本框，但关闭了Chrome自动填充。
答案 45 :(得分：0)
我已经尝试了所有提到的建议，但没有一个有效。我正在使用特定输入上的谷歌地方自动完成功能，如果谷歌地方自动填充列表上方有谷歌浏览器自动填充，那就太难看了。即使设置autocomplete =“anything”也没用，因为自动完成插件本身会将此attr设置为“off”，并且Chrome完全忽略它。
所以我的解决方案是：
var fixAutocomplete = window.setInterval(function(){
if ($('#myinput').attr('autocomplete') === 'false') {
window.clearInterval(fixAutocomplete);
}
$('#myinput').attr('autocomplete', 'false');
}, 500);
答案 46 :(得分：0)
我的问题是Chrome会通过Bootstrap自动完成界面自动填充邮政编码，因为我自动建议从我的数据库中提供可能的值。
我必须做的事情：
id属性更改为“postcode”以外的其他属性autocomplete值更改为false $('#postcode_field').autocomplete(...)后，我必须使用$('#postcode_field').prop('autocomplete', 'false');重设自动填充属性，因为Boostrap的自动完成插件会自动将其更改为off。答案 47 :(得分：0)
纯HTML解决方案：
（不需要javascript，不需要css，也不需要隐藏输入）
import pandas as pd
def fun(x):
x[0]=x[0]*2
return x
df=pd.DataFrame({"a":[1,2,3], "b":[11,12,13], "c":[10,20,30]})
df=df.apply(fun,axis=1)
df=df.apply(fun,axis=1)
print df
注意：
答案 48 :(得分：0)
除了autocomplete =“off”之外，还必须将值设置为空（value =“”）才能使其正常工作。
答案 49 :(得分：0)
这些解决方案都不适合我。最后，在我的头发拉了几个小时后，我想出了这个ReactJS的解决方案。
在FireFox 54.0.1，Chrome 61.0.3163.100，Mac OS 10.13上测试
我保留type="text"并将其更改为onChange事件的相关类型。
例如： HTML：
<input type="text" onChange={this.setAttributes} placeholder="Email" />
JS：
setAttr2: function(e){
var value = e.target.value;
if(value.length){
e.target.setAttribute('type', 'email')
} else {
e.target.setAttribute('type', 'text')
}
}
答案 50 :(得分：0)
Jobin Jose的回答给了我一个开始。这对我有用：
<input type="password" name="password" id="password_fake" style="display:none;" />
<input type="password" name="password"/>
确保没有autocomplete =“off”，这会破坏解决方案。
答案 51 :(得分：0)
这些问题的其他解决方案都没有为我工作。
唯一有效的想法是this one：
它从元素中删除“name”和“id”属性并分配它们 1ms后回来。把它放在文档准备好了。
$(document).ready(function() {
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
});
答案 52 :(得分：0)
通过此技巧已成功禁用自动填充功能。 有效！
<强> [HTML]
<div id="login_screen" style="min-height: 45px;">
<input id="password_1" type="text" name="password">
</div>
<强> [JQuery的]
$("#login_screen").on('keyup keydown mousedown', '#password_1', function (e) {
let elem = $(this);
if (elem.val().length > 0 && elem.attr("type") === "text") {
elem.attr("type", "password");
} else {
setTimeout(function () {
if (elem.val().length === 0) {
elem.attr("type", "text");
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
}, 1);
}
if (elem.val() === "" && e.type === "mousedown") {
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
});
答案 53 :(得分：0)
1月20日Chrome更新
以上解决方案均无效，包括添加假字段或设置autocomplete = new-password有效。是的，这些chrome不会自动完成，但是当您输入密码字段时，它会再次建议密码。
我发现如果您删除密码字段然后再次添加而没有ID ，那么chrome不会自动填充它，也不会在输入时建议密码。
使用类来获取密码值而不是id。
对于firefox，仍然需要添加虚拟元素。
此解决方案还允许基于标志允许/禁止自动完成：
HTML：
<!-- form is initially hidden, password field has a dummy id and a class 'id' -->
<form id="loginForm" style="display:none;">
<span>email:</span><input type="text" placeholder="Email" id="loginEmailInputID"/>
<span>Password:</span><input class="loginPasswordInput" type="password" placeholder="Password" id="justForAutocomplete"/>
</form>
页面加载：
function hideAutoComplete(formId) {
let passwordElem=$('#'+formId+' input:password'), prev=passwordElem.prev();
passwordElem.remove();
prev.after($('<input type="password" style="display:none">'), passwordElem.clone().val('').removeAttr('id'));
}
if (!allowAutoComplete) hideAutoComplete('loginForm');
$('#loginForm').show();
当您需要密码时：
$('.loginPasswordInput').val();
答案 54 :(得分：0)
因为显示无似乎不再起作用
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
在div中隐藏溢出，max-width＆amp; max-height 0px
所以它变成了：
<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
</div>
答案 55 :(得分：0)
我的黑客 - 在Chrome 48中测试过：
由于Chrome会尝试通过查看id的{{1}}或name属性，以及关联的<input>内容来查找字段类型，你只需为这些找到毫无意义的名字。
对于<label>和id，您可以轻松选择未列出的其他内容here。
对于name，我在中间插入了一个不可见的label，例如对于一个城市（它正在弄乱我的Places autocomplete)：
<span>完整的工作示例：
<span>Ci<span style="display:none">*</span>ty</span>
答案 56 :(得分：0)
Unfortunately none of the solutions seem to work. I was able to blank out email (username) using
ModalTypes.Edit == 1technique, but password still populates.
答案 57 :(得分：0)
我遇到了这个问题，现在正在登录或注册＆＃34;模态窗口，如果用户已将其凭据保存到浏览器，则会出现问题。登录和注册字段都已填充，因此我可以使用以下angular js指令清除它们：
(function () {
"use strict";
var directive = function ($timeout) {
return {
restrict: "A",
link: function (scope, element, attrs) {
$timeout(function () {
element.val(" ");
$timeout(function () {
element.val("");
});
});
}
};
};
angular.module("app.directives").directive("autofillClear", ["$timeout", directive]);
}());
它与之前使用jquery的一些答案基本相同，但是以有角度的方式完成。
答案 58 :(得分：0)
通过添加“display：none;”来隐藏它的方法如果表单是通过javascript生成的，则输入对我不起作用。
所以我把它们放在视线之外让它们看不见：
<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"/>
答案 59 :(得分：0)
我知道这不完全相关，但这就是我所做的。 自动填充字段会引发“更改”事件，但前提是您尽早将其绑定到它们。
所以我把它放在头部。
$(document).ready(function(){
$('input').on('change',function(){$(this).val('')})
});
它对我有用。
答案 60 :(得分：-1)
我的解决方案：
test.htm它在具有'autocomplete =“off”'的表单中的所有输入字段上设置属性'autocomplete =“false”'。
这适用于chrome，firefox和safari。
答案 61 :(得分：-1)
你可以这样做。
$(window).load(function() {
var form = $('#fatherel .container-form').html().replace(/legend/ig, 'form')
$('#fatherel .container-form').html(form)
});
答案 62 :(得分：-1)
我尝试了很多解决方案，看起来谷歌的更新可能已经改变，截至2017年1月，对我有用的解决方案是添加另一个输入并在填充后隐藏它。
<input type="text" id="phone_number" name="phone_number" value="">
<input type="text" id="dummy_autocomplete">
script type="text/javascript">
$('#dummy_autocomplete').hide();
</script>
答案 63 :(得分：-1)
以为我会发布我的修复程序。发现你不能使用display：none所以我想出了一个快速而肮脏的解决方案，只是让假输入变小并将其移出视线。到目前为止一直很好，直到他们再次破坏它。
<input id="FakePassword" type="password" style="float:left;position:relative;height:0;width:0;top:-1000px;left:-1000px;" />
答案 64 :(得分：-1)
使用镶边，如果您在标签内包含带有标签的输入，请输入街道，地址或两者，它将忽略任何禁用自动填充的尝试。
<label for="searchAddress" class="control-label"> Street Address <input type="text" class="form-control" name="searchAddress></label>
Chrome会检测标签中的关键字以确定输入类型。它也可能与其他关键词一起使用。
答案 65 :(得分：-2)
我终于通过在输入字段中放入一个非重复变量来解决这个问题 - 我使用了php time（），如下所示：
<input type="text" name="town['.time().']" >
这主要是干扰n android。我在服务器端做的就是在输入名称上做一个foreach循环 - 问题是如果chrome识别它将自动填充的name属性。
其他任何东西都不适合我。
答案 66 :(得分：-4)
这是我使用的最新解决方案。
$('#email').prop('autocomplete', true);