禁用Chrome自动填充
我一直在遇到几种forms的自动填充行为的问题。
表单中的字段都有非常普通和准确的名称，例如“email”，“name”或“password”，同时也有autocomplete="off"设置。
自动填充标志已成功禁用了自动填充行为，在您开始input时出现下拉列表的值，但未更改Chrome自动填充字段的值。
这种行为是可以的，除了chrome不正确地填充input，例如用电子邮件地址填充电话input。 客户对此抱怨，所以经过validation，在多种情况下都会发生这种情况，而不是我在本地机器上完成的某些结果。
我能想到的唯一的当前解决scheme是dynamic生成自定义input名称，然后提取后端的值，但这似乎是一个相当hacky围绕这个问题的方式。 是否有任何标签或怪癖，改变自动填充行为，可以用来解决这个问题？
我刚刚发现，如果您有一个记住用户名和密码的网站，目前的Chrome版本将自动填充您的用户名/电子邮件地址到任何type=password字段之前的字段。 它不关心这个字段是什么 – 只是在密码将成为你的用户名之前的字段。
旧解决scheme
只需使用<form autocomplete="off"> ，它可以防止预先填写密码，以及基于浏览器假设（通常是错误的）的任何启发式填充字段。 与使用<input autocomplete="off">相反，它似乎被密码自动填充忽略（在Chrome中，Firefox确实服从它）。
更新解决scheme
Chrome现在忽略<form autocomplete="off"> 。 因此，我原来的解决方法（我已经删除）现在是所有的愤怒。
只需创build几个字段，并用“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月更新
刚刚testing过最新的Chrome – 都很好。 现在这是一个相当古老的答案，但我想提一提，我们的团队多年来一直在使用它几十个项目。 尽pipe下面有一些评论，它仍然很好。 没有可访问性的问题，因为这些字段是display:none他们没有得到重点。 正如我所提到的，你需要把它们放在你真实的领域之前 。
如果您使用JavaScript来修改您的表单，那么您将需要额外的技巧。 在操作表单时显示假的字段，然后在一毫秒之后再隐藏它们。
使用jQuery的示例代码（假设你给你的假字段一个类）：
$(".fake-autofill-fields").show(); // some DOM manipulation/ajax here window.setTimeout(function () { $(".fake-autofill-fields").hide(); },1);
对于新的Chrome版本，您只需在自己的密码字段中inputautocomplete="new-password" 。 我检查过了，工作正常。
在本次讨论中得到了Chrome开发者的build议： https : //bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
PS不要忘记使用不同字段的唯一名称来防止自动填充。
经过数月和数月的斗争，我发现解决scheme比您想象的要简单得多：
而不是autocomplete="off"使用autocomplete="false" ;）
就这么简单，它在谷歌浏览器中的魅力也是如此！
有时甚至autocomplete = off也不能阻止将凭据填入错误的字段。 所以它填补了一些领域，但不是用户或昵称！？
修复：浏览器以只读模式自动填写 ，并设置焦点可写
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
（重点=在鼠标点击和通过字段标签）
更新：移动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
说明：浏览器自动将凭据填充到错误的文本字段？
填写不正确的input，例如用电子邮件地址填写电话input
有时我会注意到Chrome和Safari上的这种奇怪的行为，当有相同forms的密码字段。 我想，浏览器查找密码字段来插入您保存的凭据。 然后它自动填充用户名到最近的文本typesinput字段，出现在DOM中的密码字段之前 （只是由于观察猜测）。 由于浏览器是最后一个实例，您无法控制它，
这只读修复上面为我工作。 更新：纯JavaScript，不需要jQuery。
尝试这个。 我知道这个问题有点老，但这是一个不同的方法。
我也注意到问题出现在password字段之上。
我尝试了两种方法
<form autocomplete="off">和<input autocomplete="off">但是他们没有为我工作。
所以我使用下面的代码片段对其进行了修复 – 只是在密码types字段上方添加了另一个文本字段，并将其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="" />
希望它能帮助别人。
我不知道为什么，但是这对我有帮助和帮助。
<input type="password" name="pwd" autocomplete="new-password">
我不知道为什么，但autocompelete =“新密码”禁用自动填充。 它工作在最新的49.0.2623.112铬版本。
对我来说，简单
<form autocomplete="off" role="presentation">
做到了。
testing了多个版本，最后一次尝试是在56.0.2924.87
以下是我提出的解决scheme，因为Google坚持压倒人们似乎做的每一项工作。
选项1 – 点击所有文字
将input的值设置为用户的示例（例如your@email.com ）或字段的标签（例如Email ），并将名为focus-select的类添加到input中：
<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(); });
我真的不能看到铬与价值观搞乱。 那太疯狂了 所以希望这是一个安全的解决scheme。
选项2 – 将电子邮件的值设置为空格，然后将其删除
假设您有两个input，例如电子邮件和密码，请将电子邮件字段的值设置为" " （空格）并添加属性/值autocomplete="off" ，然后使用JavaScript清除。 您可以将密码值留空。
如果用户由于某种原因没有JavaScript，那么确保你修改他们的input服务器端（你可能应该是这样），以防他们不删除空间。
这里是jQuery：
$(document).ready(function() { setTimeout(function(){ $('[autocomplete=off]').val(''); }, 15); });
我把超时时间设置为15因为在我的testing中偶尔会有5工作，所以把这个数字翻倍似乎是一个安全的select。
无法将初始值设置为空格会导致Chrome将input保留为黄色，就好像它已经自动填充它一样。
选项3 – 隐藏input
把这个放在表格的开头：
<!-- Avoid Chrome autofill --> <input name="email" class="hide">
CSS：
.hide{ display:none; }
确保您保留HTML注释，以便其他开发人员不要删除它！ 同时确保隐藏input的名称是相关的。
这是如此简单和棘手:)
谷歌浏览器基本上search每个在<form> ， <body>和<iframe>标签内的每个第一个可见的密码元素 ，以便为它们自动填充，因此要禁用它，您需要添加一个虚拟密码元素，如下所示：
-
-
如果您的
<form>标记中的密码元素需要将虚拟元素作为表单中的第一个元素紧接在<form>开放标记之后 -
如果你的密码元素不在
<form>标签中，那么在你的html页面中的第一个元素之后立即将哑元素作为开始标签
-
-
您需要隐藏虚拟元素，而不使用CSS
display:none所以基本上使用以下作为虚拟密码元素。<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
你必须添加这个属性：
autocomplete="new-password"
来源链接： 全文
我将这一点join不同的观点。 为什么不用蜜jar来阻止Chrome在你的领域 ？ 它似乎为我跨浏览器工作。 值得一试：
把一个input放在你不想填写的其他字段的上面。 将样式设置为不显示，最终用户将不会知道它在那里。 也没有黄色的盒子。
<input type="password" style="display:none;">
我发现将这个添加到表单可以防止Chrome使用自动填充function。
<div style="display: none;"> <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" /> </div>
在这里find。 https://code.google.com/p/chromium/issues/detail?id=468153#hc41
真的令人失望的是，Chrome已经决定它比开发者更了解什么时候自动完成。 有一个真正的微软感觉到它。
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
将只读属性添加到标记以及onfocus事件删除它解决了问题
迈克·内尔森斯提供的解决scheme不适合我在Chrome 50.0.2661.102米。 只需使用display：none来添加相同types的input元素就不会再禁用本地浏览器自动完成function。 现在有必要复制您希望禁用自动完成的input字段的名称属性。
此外，为避免input字段位于表单元素内，您应该在未显示的元素上放置一个禁用对象。 这将阻止该元素作为表单操作的一部分提交。
<input name="dpart" disabled="disabled" type="password" style="display:none;"> <input name="dpart" type="password"> <input type="submit">
如果您在保留占位符方面遇到问题，但禁用了Chrome自动填充function，我发现此解决方法。
问题
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; }
尝试下面的jQuery代码已经为我工作。
if ($.browser.webkit) { $('input[name="password"]').attr('autocomplete', 'off'); $('input[name="email"]').attr('autocomplete', 'off'); }
这有两件事。 Chrome浏览器和其他浏览器会记住之前input的字段名称，并根据该列表向用户提供一个自动完成列表（值得注意的是，由于相当明显的原因，密码typesinput永远不会被记住）。 您可以添加autocomplete="off"以防止这样的事情，如您的电子邮件字段。
但是，你有密码填充。 大多数浏览器都有自己的内置实现，还有许多第三方实用工具提供了这种function。 这，你不能停下来。 这是用户自行select保存这些信息后才自动填写，完全超出了您的应用程序的范围和影响范围。
根据铬错误报告＃352347铬不再尊重autocomplete="off|false|anythingelse" ，既不在窗体上，也不在input上。
唯一的解决scheme是为我添加一个虚拟密码字段 ：
<input type="password" class="hidden" /> <input type="password" />
对于用户名密码组合，这是一个容易解决的问题。 Chrome启发式查找模式：
<input type="text">
其次是：
<input type="password">
只要破坏这个过程就可以破坏这个过程：
<input type="text"> <input type="text" onfocus="this.type='password'">
如果您正在实现search框function，请尝试按如下方式设置要search的type属性：
<input type="search" autocomplete="off" />
这对我在Chrome v48上工作，似乎是合法的标记：
将autocomplete="new-password"到密码字段的最新解决scheme非常适合阻止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的原始答案。
这是一个肮脏的黑客 –
你有你的元素在这里（添加禁用的属性）：
<input type="text" name="test" id="test" disabled="disabled" />
然后在你的网页底部放一些JavaScript：
<script> setTimeout(function(){ document.getElementById('test').removeAttribute("disabled"); },100); </script>
我真的不喜欢制作隐藏的领域，我认为这样做会非常困惑。
在你想停止自动完成的input字段这将工作。 使字段只读和焦点删除这样的属性
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
这是做什么的，你首先必须删除只读属性通过select字段，并在当时最有可能你会填充自己的用户input和弯曲自动填充接pipe
我面临同样的问题。 这里是在Chrome上禁用自动填充用户名和密码的解决scheme（只用Chrome进行testing）
<!-- 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">
而不是“这是什么对我有用”的答案和其他答案，看起来像完整的黑客…这是目前如何铬（和最新的规范）将处理您的input元素的autocomplete属性：
https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=en
TLDR：在您的input中添加autocomplete='<value>' ，其中<value>应该是任何string，用于定义字段的用途。 这与name属性类似。 尽可能在上面的链接中使用build议的值。
另外，从表单中移除autocomplete属性
通过设置autocomplete off应该在这里工作，我有一个谷歌在search页面使用的例子。 我从检查元素中find了这个。
编辑 ：如果off不工作，然后尝试false或nofill 。 In my case it is working with chrome version 48.0
Previously entered values cached by chrome is displayed as dropdown select list.This can be disabled by autocomplete=off , explicitly saved address in advanced settings of chrome gives autofill popup when an address field gets focus.This can be disabled by autocomplete="false".But it will allow chrome to display cached values in dropdown.
On an input html field following will switch off both.
Role="presentation" & autocomplete="off"
While selecting input fields for address autofill Chrome ignores those input fields which don't have preceding label html element.
To ensure chrome parser ignores an input field for autofill address popup a hidden button or image control can be added between label and textbox. This will break chrome parsing sequence of label -input pair creation for autofill. Checkboxes are ignored while parsing for address fields
Chrome also considers "for" attribute on label element. It can be used to break parsing sequence of chrome.
The only way that works for me was:(jQuery required)
$(document).ready(function(e) { if ($.browser.webkit) { $('#input_id').val(' ').val(''); } });
Like Dvd Franco said, for me only puting automplete='off' in all fields it worked. So I put this jquery rules in $(document).ready(); function on my main .js file
$('form.no_autofill').attr('autocomplete','off'); $('.no_autofill input').attr('autocomplete','off');
Different solution, webkit based. As mentioned already, anytime Chrome finds a password field it autocompletes the email. AFAIK, this is regardless of autocomplete = [whatever].
To circumvent this change the input type to text and apply the webkit security font in whatever form you want.
.secure-font{ -webkit-text-security:disc;} <input type ="text" class="secure-font">
From what I can see this is at least as secure as input type=password, it's copy and paste secure. However it is vulnerable by removing the style which will remove asterisks, of course input type = password can easily be changed to input type = text in the console to reveal any autofilled passwords so it's much the same really.
