我在几个表单上遇到了 chrome 自动填充行为的问题。
表单中的字段都有非常常用和准确的名称，例如“email”、“name”或“password”，并且它们也有autocomplete="off"设置。
自动完成标志已成功禁用自动完成行为，在您开始输入时会出现下拉值，但并未更改 Chrome 自动填充字段的值。
除了 chrome 错误地填充输入之外，这种行为是可以的，例如用电子邮件地址填充电话输入。客户对此提出了投诉，因此已证实它在多种情况下都会发生，而不是作为我在我的机器上本地完成的某事的某种结果。
我能想到的唯一当前解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是解决这个问题的一种非常老套的方法。是否有任何标签或怪癖可以改变可用于解决此问题的自动填充行为？
2021 年 1 月： autocomplete="off"现在可以按预期工作（在 Chrome 88 macOS 上测试）。
为此，请确保您的输入标签包含在表单标签中
2020 年 9 月： autocomplete="chrome-off"禁用 Chrome 自动填充功能。
原始答案，2015：
对于新的 Chrome 版本，您只需autocomplete="new-password"输入密码字段即可。我已经检查过了，工作正常。
在此讨论中从 Chrome 开发人员那里得到了这个提示： https ://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
PS 请注意，Chrome 将尝试从名称、ID 和它可以在字段周围获取的任何文本内容（包括标签和任意文本节点）推断自动填充行为。如果在上下文中存在自动完成标记street-address，Chrome 会自动填充它。启发式可能会非常令人困惑，因为它有时只会在表单中有其他字段时触发，或者如果表单中的字段太少则不会触发。另请注意，这autocomplete="no"似乎可行，但autocomplete="off"由于历史原因不会。autocomplete="no"你是在告诉浏览器这个字段应该自动完成为一个名为"no". 如果您生成唯一的随机autocomplete名称，则会禁用自动完成。
如果您的用户访问了错误的表单，他们的自动填充信息可能已损坏。让他们手动进入并在 Chrome 中修复其自动填充信息可能是他们采取的必要措施。
我刚刚发现，如果您记住了某个站点的用户名和密码，当前版本的 Chrome 会在任何字段之前将您的用户名/电子邮件地址自动填充到该字段type=password中。它不关心该字段的名称 - 只是假设密码之前的字段将成为您的用户名。
旧解决方案
只需使用<form autocomplete="off">它就可以防止密码预填充以及基于浏览器可能做出的假设（通常是错误的）的任何类型的启发式填充字段。与 using <input autocomplete="off">which 似乎几乎被密码自动填充忽略（在 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 最近开始再次预填充我的“电子邮件”字段 - 所以我加倍努力并在“电子邮件”字段之前输入更多假字段，并修复了它. 删除第一批或第二批字段将恢复为不正确的过度自动填充。
2020 年 3 月更新
目前尚不清楚该解决方案是否以及何时仍然有效。它有时似乎仍然有效，但并非一直有效。
在下面的评论中，您会发现一些提示。@anilyeni 刚刚添加的一个可能值得更多调查：
正如我所注意到autocomplete="off"的，如果<form>. 我不知道逻辑是什么或有关它的相关文档在哪里。
@dubrox 的这个也可能是相关的，虽然我没有测试过：
非常感谢这个技巧，但请更新答案，因为display:none;它不再起作用了，但是position: fixed;top:-100px;left:-100px; width:5px;:)
2020 年 4 月更新
此属性的 chrome 的特殊值正在完成这项工作：（在输入上测试 - 但不是由我测试）
autocomplete="chrome-off"
经过几个月和几个月的努力，我发现解决方案比你想象的要简单得多：
而不是autocomplete="off"使用autocomplete="false";)
就这么简单，它在谷歌浏览器中也像一个魅力！
2019 年 8 月更新（评论中感谢 @JonEdiger）
注意：网上很多信息说浏览器现在将 autocomplete='false' 视为与 autocomplete='off' 相同。至少在这一分钟，它正在阻止这三个浏览器的自动完成。
将其设置在表单级别，然后对于您想要关闭的输入，设置为一些无效值，例如“无”：
<form autocomplete="off">
<input type="text" id="lastName" autocomplete="none"/>
<input type="text" id="firstName" autocomplete="none"/>
</form>
有时甚至autocomplete=off不会阻止将凭据填写到错误的字段中。
一种解决方法是使用只读模式禁用浏览器自动填充并将焦点设置为可写：
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
该focus事件发生在鼠标单击和通过字段切换时。
更新：
移动 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/
// 更新结束
说明：浏览器自动将凭据填充到错误的文本字段？
错误地填写输入，例如用电子邮件地址填写电话输入
有时我会在 Chrome 和 Safari 上注意到这种奇怪的行为，当密码字段以相同的形式出现时。我猜，浏览器会寻找密码字段来插入您保存的凭据。然后它将用户名自动填充到最近的 textlike-input 字段中，该字段出现在 DOM 中的密码字段之前（只是由于观察而猜测）。由于浏览器是最后一个实例，您无法控制它，
上面的这个只读修复对我有用。
如果您正在实现搜索框功能，请尝试将type属性设置search为如下：
<input type="search" autocomplete="off" />
这在 Chrome v48 上对我有用，并且似乎是合法的标记：
我不知道为什么，但这对我很有帮助。
<input type="password" name="pwd" autocomplete="new-password">
我不知道为什么，但autocomplete="new-password"禁用自动填充。它适用于最新的49.0.2623.112 chrome 版本。
尝试这个。我知道这个问题有些陈旧，但这是解决问题的另一种方法。
我还注意到这个问题就在这个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="" />
希望它会帮助某人。
对我来说，简单
<form autocomplete="off" role="presentation">
做到了。
在多个版本上测试，最后一次尝试是在 56.0.2924.87
它是如此简单和棘手:)
谷歌浏览器基本上会搜索,和标签中的每个可见密码元素，以便为它们启用自动重新填充，因此要禁用此功能，您需要添加一个虚拟密码元素，如下所示：<form><body><iframe>
如果您的密码元素在标签内，您需要在打开标签<form>后立即将虚拟元素作为表单中的第一个元素<form>
如果您的密码元素不在标签内，则在打开标签<form>后立即将虚拟元素作为 html 页面中的第一个元素<body>
您需要在不使用 css 的情况下隐藏虚拟元素，display:none因此基本上使用以下内容作为虚拟密码元素。
<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
这是我提出的解决方案，因为谷歌坚持要覆盖人们似乎做出的每一个变通办法。
将输入的值设置为您的用户的示例（例如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 注释，以免其他开发人员将其删除！还要确保隐藏输入的名称是相关的。
使用 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;
}
在某些情况下，即使自动完成属性设置为关闭，浏览器也会继续建议自动完成值。这种意想不到的行为可能会让开发人员感到非常困惑。真正强制不自动完成的技巧是为属性分配一个随机字符串，例如：
autocomplete="nope"
以前输入的由 chrome 缓存的值显示为下拉选择列表。这可以通过 autocomplete=off 禁用，在 chrome 的高级设置中明确保存的地址会在地址字段获得焦点时提供自动填充弹出窗口。这可以通过 autocomplete="false" 禁用.但是它将允许chrome在下拉列表中显示缓存的值。
在输入 html 字段上，以下将关闭两者。
Role="presentation" & autocomplete="off"
在为地址自动填充选择输入字段时，Chrome 会忽略那些没有前面标签 html 元素的输入字段。
为了确保 chrome 解析器忽略自动填充地址弹出的输入字段，可以在标签和文本框之间添加隐藏按钮或图像控件。这将破坏自动填充的标签输入对创建的 chrome 解析序列。解析地址字段时忽略复选框
Chrome 还考虑标签元素上的“for”属性。它可以用来打破 chrome 的解析序列。
我发现将此添加到表单会阻止 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 决定它比开发人员更了解何时自动完成。有一种真正的微软感觉。
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
将 readonly 属性添加到标签以及 onfocus 事件删除它修复了问题
对于用户名密码组合，这是一个容易解决的问题。Chrome 启发式查找模式：
<input type="text">
其次是：
<input type="password">
简单地通过使这个无效来打破这个过程：
<input type="text">
<input type="text" onfocus="this.type='password'">
2016 年，Google Chrome 开始忽略autocomplete=off它，尽管它在 W3C 中。他们发布的答案：
这里棘手的部分是，在网络之旅的某个地方 autocomplete=off 成为许多表单字段的默认设置，而没有真正考虑过这是否对用户有利。这并不意味着不存在您不希望浏览器自动填充数据的非常有效的情况（例如在 CRM 系统上），但总的来说，我们将这些情况视为少数情况。因此，我们开始忽略 Chrome 自动填充数据的 autocomplete=off。
这实质上是说：我们更了解用户想要什么。
当需要 autocomplete=off 时，他们打开了另一个错误以发布有效用例
在我的所有 B2B 应用程序中，我没有看到与自动完成有关的问题，但只有输入密码类型。
如果屏幕上有任何密码字段，即使是隐藏的，自动填充也会介入。要打破这个逻辑，如果它不破坏你自己的页面逻辑，你可以将每个密码字段放入它自己的表单中。
<input type=name >
<form>
<input type=password >
</form>
Mike Nelsons 提供的解决方案在 Chrome 50.0.2661.102 m 中对我不起作用。只需添加具有 display:none 设置的相同类型的输入元素不再禁用本机浏览器自动完成。现在需要复制您希望禁用自动完成的输入字段的名称属性。
此外，为避免输入字段在表单元素中时重复，您应该在未显示的元素上放置禁用。这将阻止该元素作为表单操作的一部分提交。
<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
如果您在保留占位符但禁用 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;
}
这有两个部分。Chrome 和其他浏览器会记住以前输入的字段名称值，并基于此向用户提供一个自动完成列表（值得注意的是，密码类型输入永远不会以这种方式记住，原因很明显）。您可以在电子邮件字段等内容上添加autocomplete="off"以防止这种情况发生。
但是，您将拥有密码填充器。大多数浏览器都有自己的内置实现，并且还有许多提供此功能的第三方实用程序。这，你停不下来。这是用户自行选择保存此信息以供以后自动填写，完全超出您的应用程序的范围和影响范围。
我真的不喜欢制作隐藏字段，我认为这样做会很快变得非常混乱。
在您要停止自动完成的输入字段上，这将起作用。使字段只读并在焦点上删除该属性，如下所示
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
这样做是您首先必须通过选择该字段来删除只读属性，那时您很可能将填充您自己的用户输入并弯腰自动填充以接管
好吧，既然我们都有这个问题，我花了一些时间来为这个问题编写一个有效的 jQuery 扩展。谷歌必须遵循 html 标记，而不是我们遵循谷歌
(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();
});
试试下面jQuery对我有用的代码。
if ($.browser.webkit) {
$('input[name="password"]').attr('autocomplete', 'off');
$('input[name="email"]').attr('autocomplete', 'off');
}
这是一个肮脏的黑客 -
你在这里有你的元素（添加 disabled 属性）：
<input type="text" name="test" id="test" disabled="disabled" />
然后在你的网页底部放一些 JavaScript：
<script>
setTimeout(function(){
document.getElementById('test').removeAttribute("disabled");
},100);
</script>
不同的解决方案，基于 webkit。如前所述，只要 Chrome 找到密码字段，它就会自动完成电子邮件。AFAIK，这与 autocomplete = [whatever] 无关。
为了规避这种情况，请将输入类型更改为文本并以您想要的任何形式应用 webkit 安全字体。
.secure-font{
-webkit-text-security:disc;}
<input type ="text" class="secure-font">
据我所知，这至少与输入类型 = 密码一样安全，它是复制和粘贴安全的。但是，通过删除将删除星号的样式很容易受到攻击，当然 input type = password 可以很容易地在控制台中更改为 input type = text 以显示任何自动填充的密码，因此实际上几乎相同。
我终于使用textarea. 对于密码字段，有一个事件处理程序将输入的每个字符替换为“•”。
根据Chromium 错误报告 #352347 Chrome 不再尊重autocomplete="off|false|anythingelse"，无论是表单还是输入。
对我有用的唯一解决方案是添加一个虚拟密码字段：
<input type="password" class="hidden" />
<input type="password" />
通过设置autocomplete应该off在这里工作，我有一个谷歌在搜索页面中使用的例子。我从检查元素中找到了这个。
编辑：如果off不起作用，请尝试false或nofill. 就我而言，它正在使用 chrome 版本 48.0
添加到密码字段的最新解决方案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 的原始答案。
我遇到了同样的问题。这是在 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">
对我有用的唯一方法是：（需要jQuery）
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
尝试在值中留一个空格：
<input type="email" name="email" value=" ">
<input type="password" name="password" value=" ">
铬 54.0.2840.59
我的解决方法，因为上述方法似乎都不适用于 Chrome 63 及更高版本
我通过将有问题的输入元素替换为
<p class="input" contenteditable="true"> </p>
并在提交之前使用 jQuery 填充隐藏字段。
但由于 Chromium 的一个错误决定，这是一个真正可怕的黑客行为。
最后，我认为我提出了一个不错的解决方案。更好地了解下拉菜单如何与 Chrome 一起使用有助于 :) 基本上，当您聚焦输入时，当您输入与 Chrome 内存中的内容匹配的条目时，当您生成鼠标按下事件时，将显示下拉菜单。请记住这一点，并且 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（我最喜欢的一个）
我上面描述的解决方案将删除输入的名称，直到我们删除焦点（模糊），在那一刻它会放回原来的名称。但是可能会发生我们有兴趣在输入时通过其名称属性访问输入。这意味着我们需要在每次输入后立即放回名称。这个解决方案，基本上是基于第一个解决方案。在这种情况下，我们将在 key down 上添加名称，并将其放回 keyup。我认为这更适合与“自动完成关闭”行为的兼容性。无论如何，这是代码：
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，我仅采用了输入名称为“名称”和“电子邮件”的情况。对于此属性使 Chrome 生成下拉列表的任何其他情况，您必须将其添加到鼠标按下事件的选择器中。
解决方案 3
这个解决方案更加混乱。我没有意识到我们试图纠正的行为只是基于那些具有特定名称的输入，如“姓名、电子邮件等”。该解决方案的方法是针对 Chrome 显示我们事先不知道的其他名称的情况。这将是一个非常通用的解决方案。我不像其他两个那样喜欢，主要是因为当我们按下删除键时可能会有一个小的闪烁。我将在下面解释。
我发现第二次单击输入后会出现下拉菜单，但当您第一次将注意力集中在输入上时，不会出现在第一次单击时。我为所有这些元素绑定了一个“mousedown”事件，其中处理程序基本上检测它是否已经集中在输入上，如果它检测到另一个“mouse down”，则强制 .blur() 然后 .focus() 之后，防止聚焦后第二次单击的下拉菜单。我希望很清楚，以防万一这是我使用的代码：
jQuery('body').on('mousedown','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(jQuery(this).is(':focus')) {
jQuery(this).blur();
jQuery(this).focus();
}
});
另一方面，为了防止您在输入时出现下拉菜单，以防它与 Chrome 建议匹配……这有点棘手。我只是决定在用户键入时替换输入的默认行为。下拉列表评估鼠标按下时的输入，因此我阻止了字母数字、空格等的默认行为。唯一的问题是命令、Ctrl 和删除。对于这种情况，我还必须在鼠标上绑定一个事件。它允许前两种情况下的默认行为，因此您可以进行复制、粘贴或全选。在删除的情况下，我必须允许默认行为，但如果在删除字符后输入与 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();
}
正如我所说，这个解决方案更加混乱。这是我使用的第一个，直到我意识到某些输入名称才出现下拉列表。
抱歉写了这么多，我只是想确保一切都清楚。我希望它有所帮助。
而不是“这对我有用”的答案和其他看起来像完整黑客的答案......这是目前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属性类似。尽可能使用上面链接中的建议值。
此外，从您的表单中删除自动完成属性
我的解决方案取决于三件事：
首先，我们需要防止用户名和密码的自动完成，所以，最初我们将设置两个标志，i -> 用户名和 j -> 密码为真值，所以没有任何对字段 i 和 j 的 keydown真的。
如果字段屏蔽发生在服务器端，通过传递随机字符串，它也可以很容易地使用客户端进行。
这是代码：
$(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.
});
}
除了 autocomplete="off" 之外，还必须将值设置为空 (value="") 才能使其工作。
所以显然，最好的修复/黑客现在不再起作用了。我使用的 Chrome 版本是 49.0.2623.110 m，我的帐户创建表单现在显示与表单无关的已保存用户名和密码。谢谢铬！其他黑客似乎很可怕，但这种黑客不那么可怕......
为什么我们需要这些黑客工作是因为这些表格通常是帐户创建表格，即不是应该允许填写密码的登录表格。您不希望删除用户名和密码的麻烦的帐户创建表格。从逻辑上讲，这意味着永远不会在渲染时填充密码字段。所以我使用了一个文本框和一些 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() 并且密码会被添加到输入框中，然后隐藏为密码。但是，由于我的密码是散列的，输入框中的密码是散列密码，永远不应该发回服务器 - 意外保存散列散列密码对于尝试登录的人来说会很痛苦。基本上.. . 如果使用此方法，请记住在渲染输入框之前将密码设置为空字符串。
如果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>
纯 HTML 解决方案：
（不需要javascript，不需要css，也不需要隐藏输入）
<form autoComplete="new-password" ... >
<input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>
笔记：
在 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不工作
我需要一些额外的字段才能正常工作，因为 chrome 实际上填充了许多字段。而且我还需要以一种比 display:none 更奇特的方式隐藏字段才能真正起作用。
<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"/>
就像 Dvd Franco 说的那样，对我来说，只在它工作的所有领域都设置了 automplete='off'。所以我把这个 jquery 规则放在 $(document).ready(); 在我的主 .js 文件上运行
$('form.no_autofill').attr('autocomplete','off');
$('.no_autofill input').attr('autocomplete','off');
自动完成功能已通过此技巧成功禁用。 有用！
[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);
}
});
Boom、谷歌浏览器和其他任何人都试图打败它。
我能够在 2017 年 9 月 7 日实现这一点，但使用的是在我的 MVC 视图中生成的随机字符串的 FormCollection。
我将首先在我的登录页面的索引控制器中获得一个新的随机密钥，加密并创建一个新的完全唯一的随机字符串（我实际上使用 256 位密码来执行此操作，以及一个唯一的密码和身份验证密钥），然后我追加每个字符串末尾的纯文本“用户名”和“密码”，以便稍后帮助我从响应视图控制器中识别用户名和密码。只要您知道模式并且它是唯一的，您也可以将该纯字符串更改为任何内容。
在我看来，然后我适当地使用了这些变量，然后在响应控制器中 - 通过 FormCollection 搜索并找到我匹配的变量 - 然后使用该项目的键值作为相应的用户名和密码来进行适当的处理。
我认为 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",
};
我认为这是一个很好的解决方法，但是嘿它有效，而且我认为它也可能是未来的证明，除非谷歌确定页面的 URL 中有关键词，然后适当地在任何输入字段的顶部添加其愚蠢的扩展- 但这有点激烈。
对于 Angular 用户：
由于autocomplete = 'off'新的 chrome 版本忽略，chrome 开发人员建议 autocomplete='false | random-string'，所以谷歌浏览器/现代浏览器有两种类型的用户助手 -
autocomplete='off'（这会阻止最后缓存的建议）。autocomplete = 'false | random-string'（这会阻止自动填充设置，因为浏览器不知道“随机字符串”）。
那么如果禁用这两个烦人的建议该怎么办？这是诀窍：-
autocomplete = 'off'每个输入字段。（或简单的 Jquery）。示例：$("input").attr('autocomplete', 'off');
<form name='form-name'>从 HTML 代码中删除标签并添加ng-form = 'form-name'到您的<div>容器中。添加ng-form="form-name"还将保留您的所有验证。我在“立即登录或注册”模式窗口中遇到了这个问题，如果用户将他们的凭据保存到浏览器中，就会出现问题。登录和注册字段都已填充，因此我可以使用以下 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 的一些答案基本相同，但以有角度的方式完成。
如果您使用 Symfony 表单，autocomplete=off如果属性是从 twig 模板应用而不是使用FormBuilder.
用这个：
....
->add('field-name', TextType::class, array(
'attr' => array(
'autocomplete' => 'off'
)
)
....
而不是：
....
{{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....
我知道这并不完全相关，但这就是我所做的。自动填充的字段会引发“更改”事件，但前提是您尽早将其绑定到它们。
所以我把这个放在头部。
$(document).ready(function(){
$('input').on('change',function(){$(this).val('')})
});
它对我有用。
我已经尝试了所有提到的建议，但没有一个奏效。我在特定输入上使用谷歌地方自动完成功能，如果在谷歌地方自动完成列表上方有一个谷歌浏览器自动填充功能，那就太难看了。即使设置 autocomplete="anything" 也是无用的，因为自动完成插件本身将此属性设置为“关闭”，并且它完全被 chrome 忽略。
所以我的解决方案是：
var fixAutocomplete = window.setInterval(function(){
if ($('#myinput').attr('autocomplete') === 'false') {
window.clearInterval(fixAutocomplete);
}
$('#myinput').attr('autocomplete', 'false');
}, 500);
不幸的是，这些解决方案似乎都不起作用。我能够使用
<!-- 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"/>
技术，但密码仍然填充。
这些问题的其他解决方案都不适合我。
唯一有效的是这个：
它从元素中删除“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);
});
});
通过添加“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"/>
没有一个解决方案对我有用。最后，在拉了我的头发好几个小时后，我想出了这个 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')
}
}
由于 display none 似乎不再起作用，因此添加
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
在隐藏溢出、最大宽度和最大高度 0px 的 div 内
所以它变成了这样的东西：
<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
</div>
我的问题是 Chrome 会通过 Bootstrap 自动完成界面自动填充邮政编码，因为我会自动从我的数据库中建议可能的值。
我必须做的事情：
id属性更改为“邮政编码”以外的其他内容autocomplete值更改为false$('#postcode_field').autocomplete(...)我不得不重置自动完成属性，$('#postcode_field').prop('autocomplete', 'false');因为 Boostrap 的自动完成插件将其更改为off自动。我的 hack — 在 Chrome 48 中测试：
由于 Chrome 试图通过查看类似id或name的属性以及<input>相关<label>内容来找出字段的类型，因此您只需要为这些找到无意义的名称即可。
对于idand name，很容易选择此处未列出的其他内容。
对于label，我在中间插入了一个不可见<span>的，例如一个城市（它弄乱了我的Places 自动完成功能）：
<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>1 月 20 日铬更新
上述解决方案均无效，包括添加虚假字段或设置 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();
Jobin Jose 的回答让我吃了一惊。这对我有用：
<input type="password" name="password" id="password_fake" style="display:none;" />
<input type="password" name="password"/>
确保没有 autocomplete="off"，这会破坏解决方案。
我所做的是将输入类型=“文本”更改为多行输入，即。
overflow-x:hidden;
overflow-y:hidden;
vertical-align:middle;
resize: none;
代码的快速解释：overflow-x 和 -y hidden 将禁用 textarea 框右侧的滚动按钮。垂直 algin 将标签垂直中间与文本区域对齐，并且 resize: none 将禁用文本区域右下角的调整大小抓取器。
从本质上讲，这意味着您的文本区域将看起来像一个文本框，但关闭了 chrome 自动填充功能。
为用户名字段输入值“”（空格）。
<input type = 'text' value = ' ' name = 'username' />
如果您曾经使用用户输入的值填充用户名，如果没有用户输入的值，则代码输入“”。
编辑：我还必须将“用户名”字段更改为“用户名”以外的名称，例如“用户名”
以为我会发布我的修复程序。发现你不能使用 display:none 所以我想出了一个快速而肮脏的解决方案，只是让假输入变小并将其移出视线。到目前为止一切顺利，直到他们再次打破它。
<input id="FakePassword" type="password" style="float:left;position:relative;height:0;width:0;top:-1000px;left:-1000px;" />使用 chrome，如果您用标签包围输入并在标签内输入街道、地址或两者兼而有之，它将忽略任何禁用自动填充的尝试。
<label for="searchAddress" class="control-label"> Street Address <input type="text" class="form-control" name="searchAddress></label>
Chrome 会检测标签中的关键字以确定输入类型。它也可能与其他关键字一起使用。
我终于通过在输入字段中放入一个非重复变量来解决这个问题 - 我使用了 php time() 像这样：
<input type="text" name="town['.time().']" >
这主要是干扰n android。我在服务器端所做的只是对输入名称进行 foreach 循环 - 问题是如果 chrome 识别出它会自动填充的名称属性。
没有别的东西对我有用。
我的解决方案：
$(function(){
$("form[autocomplete=off]").find('input').attr('autocomplete', 'false');
});
它在具有“autocomplete="off"' 的表单中的所有输入字段上设置属性 'autocomplete="false"'。
这适用于 chrome、firefox 和 safari。
上次我检查 Google 在 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>
这是我使用的最新解决方案。
$('#email').prop('autocomplete', true);