禁用Chrome浏览器自动填充

我遇到了chrome自动填充行为的几个形式的问题。

表单中的字段都有非常常见和准确的名称,例如“电子邮件”、“名称”或“密码”,它们还设置了autocomplete="off"

自动完成标志已经成功禁用了自动完成行为,当你开始输入时,会出现一个下拉的值,但没有改变Chrome自动填充字段的值。

这种行为是可以的,除了chrome填充输入不正确,例如填充电话输入与电子邮件地址。客户抱怨过这个问题,所以它被证实在很多情况下都发生了,而不是我在我的机器上本地操作的某种结果。

目前我能想到的唯一解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖,改变自动填充行为,可以用来解决这个问题?

977505 次浏览

我刚刚发现,如果你有一个记住的用户名和密码的网站,当前版本的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 -一切都很好。这是一个相当古老的答案,但我想说的是,我们的团队已经在几十个项目中使用它很多年了。尽管下面有一些评论,但它仍然很好用。可访问性没有问题,因为字段是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"在Chrome 80上工作,如果在<form>中有少于三个元素。我不知道它的逻辑是什么,也不知道它的相关文档在哪里。

还有来自@dubrox的这个可能是相关的,尽管我还没有测试过:

非常感谢你的技巧,但请更新答案,因为display:none;不再工作了,但position: fixed;top:-100px;left:-100px; width:5px;可以:)

2020年4月更新

chrome的特殊值为这个属性正在做的工作:(在输入上测试-但不是由我) # EYZ0 < / p >

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

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

试试这个。我知道这个问题有点老了,但这是解决这个问题的另一种方法。

我还注意到问题出现在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="" />

希望它能帮助到一些人。

唯一适合我的方法是:(jQuery要求)

$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});

这里有两个部分。Chrome和其他浏览器将记住先前输入的字段名值,并基于此为用户提供一个自动完成列表(值得注意的是,密码类型输入以这种方式记住从来没有,原因相当明显)。您可以添加autocomplete="off"来防止在电子邮件字段等内容上出现这种情况。

但是,您还可以使用密码填充器。大多数浏览器都有自己的内置实现,也有许多第三方实用程序提供此功能。这个,你不能停止。这是用户自己选择保存该信息以便稍后自动填写,完全超出了应用程序的范围和影响范围。

除了autocomplete="off"外,还必须将值设置为空(value="")才能使其工作。

有时即使是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上注意到这种奇怪的行为,当在同样的形式。中有密码字段时,我猜浏览器会寻找密码字段来插入您保存的凭据。然后是DOM中的自动填充用户名到最近的文本输入字段,出现在密码字段之前(只是根据观察猜测)。由于浏览器是最后一个实例,你无法控制它,

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

这里有一个肮脏的hack -

你的元素在这里(添加了disabled属性):

<input type="text" name="test" id="test" disabled="disabled" />

然后在你的网页底部放一些JavaScript:

<script>
setTimeout(function(){
document.getElementById('test').removeAttribute("disabled");
},100);
</script>

如果你有问题保持占位符,但禁用chrome自动填充我发现这个解决办法。

问题

超文本标记语言

<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不会选择标签。

解决方案

超文本标记语言

<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;
}

http://jsfiddle.net/mwshpx1o/1/

我真的不喜欢做隐藏字段,我觉得这样做很快就会让人很困惑。

在您想要停止自动完成的输入字段上,这将起作用。将字段设置为只读并集中,像这样删除该属性

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

这所做的是,你首先要删除只读属性通过选择字段,在那个时候,最有可能的是,你将填充你自己的用户输入和弯曲自动填充接管

对于用户名密码组合,这是一个很容易解决的问题。Chrome启发式查找模式:

<input type="text">

紧随其后的是:

<input type="password">

简单地通过使其无效来中断这个过程:

<input type="text">
<input type="text" onfocus="this.type='password'">

最后我想我找到了一个不错的解决方案。更好地理解下拉菜单是如何与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(我最喜欢的一个)

我上面描述的解决方案将删除输入的名称,直到我们删除焦点(模糊),在那一刻,它将把原来的名称放回去。但是可能会发生这样的情况:我们想在输入时通过name属性访问输入。这意味着我们需要在每次输入之后立即放回名称。这个解决方案,基本上是基于第一个解决方案。在本例中,我们将在keydown上添加名称,并将其放回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,我只采用输入名称为“name”和“email”的情况。对于任何其他情况下,这个属性使Chrome生成下拉,你将不得不添加它在选择器的鼠标下拉事件。

解决方案3

这个解决方案要复杂得多。我没有意识到我们试图纠正的行为只是基于那些带有特定名称的输入,如“姓名,电子邮件等”。这种解决方案的方法是在这种情况下,Chrome显示的其他名称,我们不知道一个先验。这将是一个非常通用的解决方案。我不像其他两个那样喜欢,主要是因为当我们按下删除键时,可能会有一个小闪烁。我会在下面解释。

我发现,下拉框出现在第二次点击输入后,而不是第一次点击时,当你第一次聚焦在输入上时。我为所有这些元素绑定了一个“mousedown”事件,其中处理程序基本上检测它是否已经聚焦在输入上,如果它检测到另一个“鼠标向下”,强制一个.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();
}

就像我说过的,这个解要复杂得多。这是我使用的第一个,直到我意识到下拉列表只出现在某些输入名称上。

抱歉写了这么多,我只是想确保一切都清楚。我希望这能有所帮助。

经过几个月的努力,我发现解决办法比你想象的要简单得多:

autocomplete="false"代替autocomplete="off";)

就这么简单,它的工作就像一个魅力在谷歌Chrome浏览器以及!


2019年8月更新(评论中来自@JonEdiger)

注意:网上有很多信息说浏览器现在处理autocomplete='false'与autocomplete='off'相同。至少在这一刻,它阻止了这三个浏览器的自动完成。

在表单级别设置它,然后对于你想关闭的输入,设置为一些无效的值,比如'none':

<form autocomplete="off">
<input type="text" id="lastName" autocomplete="none"/>
<input type="text" id="firstName" autocomplete="none"/>
</form>

我遇到了“现在登录或注册”模式窗口的问题,如果用户已经将他们的凭据保存到浏览器中,这是一个问题。sign in和register字段都被填充了,所以我可以用下面的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的一些答案相同,但以一种角度的方式完成。

以下是我提出的解决方案,因为谷歌坚持推翻人们似乎做出的每一个变通办法。

选项1 -选择所有文本点击

为你的用户设置输入的值(例如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会搞砸数值。那太疯狂了。希望这是一个安全的解决方案。

选项2 -设置电子邮件值为一个空间,然后删除它

假设您有两个输入,例如电子邮件和密码,将电子邮件字段的值设置为" "(一个空格),并添加属性/值autocomplete="off",然后使用JavaScript清除该值。# EYZ2

如果用户出于某种原因没有JavaScript,请确保您在服务器端修改了他们的输入(无论如何您都应该这样做),以防他们不删除空格。

下面是jQuery:

$(document).ready(function() {
setTimeout(function(){
$('[autocomplete=off]').val('');
}, 15);
});

我将超时设置为15,因为在我的测试中5似乎偶尔会工作,所以将这个数字增加三倍似乎是一个安全的赌注。

如果没有将初始值设置为空格,Chrome会让输入框显示为黄色,就好像它已经自动填充了一样。

选项3 -隐藏输入

把这个放在表单的开头:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

确保您保留了HTML注释,这样其他开发人员就不会删除它!还要确保隐藏输入的名称是相关的。

2022年4月: autocomplete="off"仍然不能在Chrome中工作,我不相信它曾经看过与这个问题相关的Chrome bug(可能只针对密码字段)。我看到在2014中报告的问题被关闭为“wontfix”,而问题仍然悬而未决,正在讨论中。据我所知,Chromium团队不相信autocomplete="off"有一个有效的用例。

总的来说,我仍然相信这两种极端的策略(“总是尊重自动完成=关闭”;和&;never honor autocomplete=off")都很好。

https://bugs.chromium.org/p/chromium/issues/detail?id=914451#c66

他们的印象是,网站不会正确使用它,并决定不应用它,提出以下建议:

在你想禁用自动填充的情况下,我们的建议是 利用自动完成属性为您的 字段。如果我们遇到一个我们不需要的自动完成属性 请注意,我们不会尝试填充它 例如,如果您的CRM工具中有一个地址输入字段 你不希望Chrome自动填充,你可以给它语义 意思是相对于你的要求来说有意义。 自动完成=“new-user-street-address"。如果Chrome遇到这种情况,它 不会尝试自动填充字段

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开发人员那里得到了一个提示: # EYZ0 < / p >

附注:Chrome将试图推断自动填充行为从名称,id和任何文本内容,它可以得到周围的字段,包括标签和任意文本节点。如果在上下文中有一个像street-address这样的自动完成标记,Chrome会自动填充它。启发式可能非常令人困惑,因为它有时只在表单中有额外字段时触发,或者在表单中字段太少时不触发。还要注意,autocomplete="no"似乎可以工作,但autocomplete="off"由于历史原因不能工作。autocomplete="no"是你告诉浏览器这个字段应该作为一个名为"no"的字段自动完成。如果你生成唯一的随机autocomplete名称,你禁用自动完成。

如果你的用户访问了错误的表单,他们的自动填充信息可能是腐败的。让他们手动进入并修复Chrome中的自动填充信息可能是他们采取的必要行动。

我知道这不是完全相关的,但这是我所做的。 自动填充字段会引发一个'change'事件,但前提是你尽可能早地将其绑定到它们

我把这个放到head部分。

  $(document).ready(function(){
$('input').on('change',function(){$(this).val('')})
});

这对我很有效。

以前输入的值缓存chrome显示为下拉选择列表。这可以被autocomplete=off禁用,在chrome的高级设置中显式保存地址,当地址字段获得焦点时,会自动填充弹出窗口。这可以通过autocomplete="false"来禁用。但它将允许chrome下拉显示缓存值。

在一个输入html字段下面将关闭两者。

# EYZ0

在选择地址自动填充的输入字段时,Chrome忽略了那些没有前面标签html元素的输入字段。

为了确保chrome解析器忽略自动填充地址弹出的输入字段,可以在标签和文本框之间添加隐藏按钮或图像控件。这将打破自动填充的标签输入对创建的chrome解析序列。 在解析地址字段

时忽略复选框

Chrome也考虑标签元素上的“for”属性。它可以用来打破chrome的解析顺序。

就像Dvd Franco说的,对我来说,只有把automplete='off'在所有领域它工作。所以我把jquery规则放在$(document).ready();函数在我的主.js文件

$('form.no_autofill').attr('autocomplete','off');
$('.no_autofill input').attr('autocomplete','off');

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

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

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

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

我也遇到过同样的问题。下面是禁用自动填充用户名的解决方案。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">

我的解决方案:

$(function(){
$("form[autocomplete=off]").find('input').attr('autocomplete', 'false');
});

它在具有“autocomplete="off"”的表单中的所有输入字段上设置属性“autocomplete="false"”。

这适用于chrome, firefox和safari。

我发现,添加这个到表单阻止Chrome使用自动填充。

<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

在这里找到。# EYZ0

真的令人失望的是,Chrome已经决定它比开发人员更了解何时自动完成。有微软的感觉。

我需要一些额外的字段才能正常工作,因为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"/>

通过设置autocompleteoff应该在这里工作,我有一个被谷歌在搜索页面使用的例子。我从inspect element找到了这个。

enter image description here

< p > # EYZ0: 如果off不起作用,那么尝试falsenofill。在我的情况下,它是chrome版本48.0

根据铬错误报告#352347 Chrome不再尊重autocomplete="off|false|anythingelse",无论是在表单上还是在输入上。

对我来说唯一有效的解决方案是添加一个虚拟密码字段:

<input type="password" class="hidden" />
<input type="password" />

而不是“这对我来说是有效的”的答案和其他看起来完全像黑客的答案……这是目前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属性。尽可能使用上面链接上的建议值。

另外,从表单中删除autocomplete属性

我的黑客测试在Chrome 48:

由于Chrome试图找出字段的类型,它是通过查看idname属性的<input>,但也在相关的<label>内容,你只需要找到这些无意义的名字。

对于idname,很容易选择没有列出在这里的其他内容。

对于label,我在中间插入了一个不可见的<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>

不同的解决方案,基于webkit。如前所述,任何时候Chrome发现一个密码字段,它自动完成电子邮件。AFAIK,这与autocomplete = [whatever]无关。

为了避免这种情况,将输入类型更改为文本,并以任何您想要的形式应用webkit安全字体。

.secure-font{
-webkit-text-security:disc;}


<input type ="text" class="secure-font">

从我所看到的,这至少是安全的输入类型=密码,它的复制和粘贴安全。然而,它是脆弱的,通过删除将删除星号的样式,当然input type = password可以很容易地在控制台中更改为input type = text,以显示任何自动填充的密码,所以它是非常相同的。

不幸的是,这些解决方案似乎都不起作用。我能够空白电子邮件(用户名)使用

                    <!-- 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"/>

技术,但密码仍然流行。

在chrome浏览器中,如果你用标签包围一个输入,在标签内加上街道、地址或两者都写上,它会忽略任何试图禁用自动填充的尝试。

<label for="searchAddress" class="control-label"> Street Address <input type="text" class="form-control" name="searchAddress></label>

Chrome通过检测标签中的关键字来判断输入类型。它可能对其他关键字也是如此。

如果你正在实现一个搜索框特性,试着将type属性设置为search,如下所示:

<input type="search" autocomplete="off" />

这是为我的Chrome v48工作,似乎是合法的标记:

https://www.w3.org/wiki/HTML/Elements/input/search

这是如此简单和棘手:)

谷歌chrome基本上在<form><body><iframe>标签中搜索每个第一个可见的密码元素,以启用自动填充,因此要禁用此功能,您需要添加一个虚拟密码元素,如下所示:

    <李> < ul >
  1. 如果您的密码元素在<form>标记内,您需要将虚拟元素作为<form>打开标记后的第一个元素

  2. 如果你的密码元素不在<form>标签内,把虚拟元素作为html页面中<body>打开标签后的第一个元素

  3. 李< / ul > < / >
  4. 你需要隐藏虚拟元素而不使用css display:none,所以基本上使用以下作为虚拟密码元素。

    <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
    

所以显然,最好的修复/黑客现在不再工作,再次。我使用的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>

我认为这是可以接受的,因为用户不会在短时间内获得密码字段,并且如果该字段是密码字段,则发送回服务器没有任何区别,因为无论如何它都是以纯文本发送回来的。

< p >注意: 如果您像我一样使用相同的创建表单作为更新表单,事情可能会变得棘手。我使用mvc.asp c#,当我使用@Html.PasswordFor()时,密码没有添加到输入框。这是一件好事。我已经写好了。但是使用@Html.TextBoxFor()和密码将被添加到输入框中,然后隐藏为密码。然而,由于我的密码是散列的,输入框中的密码是散列的密码,永远不应该发布回服务器-不小心保存一个散列的散列密码将是一个痛苦的人试图登录。基本上……如果使用此方法,请记住在呈现输入框之前将密码设置为空字符串

我想我该把我的药发上去。发现你不能使用显示:没有,所以我想出了一个快速和肮脏的解决方案,只是使假输入小,并将其移出视线。到目前为止一切顺利,直到他们再次打破它。

.
                    <input id="FakePassword" type="password" style="float:left;position:relative;height:0;width:0;top:-1000px;left:-1000px;" />

我不知道为什么,但这对我很有帮助。

<input type="password" name="pwd" autocomplete="new-password">

我不知道为什么,但是自动完成=“new-password"禁用自动填充。它在最新的49.0.2623.112 chrome版本中工作。

如果表单是通过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"/>

Mike Nelsons提供的解决方案在Chrome 50.0.2661.102 m中不为我工作。 简单地添加一个与display:none设置相同类型的输入元素不再禁用本机浏览器自动完成功能。现在需要复制您希望禁用自动完成的输入字段的name属性

此外,为了避免输入字段在表单元素中重复,应该在不显示的元素上放置一个disabled。这将阻止该元素作为表单操作的一部分提交。

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

最新的解决方案添加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给出的原始答案。

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

将readonly属性添加到标记中,同时删除onfocus事件,可以修复该问题

对我来说很简单

<form autocomplete="off" role="presentation">

做到了。

在多个版本上进行了测试,最后一次尝试是在56.0.2924.87

在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不起作用

尝试在值中添加一个空格:

<input type="email" name="email" value="&nbsp;">
<input type="password" name="password" value="&nbsp;">

chrome 54.0.2840.59

你必须添加这个属性:

autocomplete="new-password"

源链接:全文

因为display none似乎不再工作 添加

<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>

在一个div溢出隐藏,max-width &max-height 0 px

所以它就变成了:

<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
</div>

上次我检查谷歌在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>

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();

如果您正在使用Symfony表单,如果属性应用于树枝模板而不是使用FormBuilderautocomplete=off将不起作用。

用这个:

....
->add('field-name', TextType::class, array(
'attr' => array(
'autocomplete' => 'off'
)
)
....

而不是:

....
\{\{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....

我最终通过在输入字段中放入一个不重复的变量来解决这个问题-我使用php time()像这样:

<input type="text" name="town['.time().']" >

这主要是对机器人的干扰。我在服务器端所做的就是在输入名称上做一个foreach循环-问题是如果chrome识别名称属性,它将自动填充。

其他的都对我没用。

这些问题的其他解决方法对我都不起作用。

唯一管用的想法是这一个:

它从元素中删除"name"和"id"属性并为它们赋值 1毫秒后返回。

$(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);
});
});

Boom,谷歌Chrome和其他人尝试击败这然后。

我能够得到这个实现今天2017年9月7日,但使用在我的MVC视图中生成的随机字符串的FormCollection。

我会首先在我的登录页面的索引控制器中获得一个新的随机密钥,加密并创建一个新的完全唯一的随机字符串(我实际上使用了一个256位的cypher来执行此操作,以及一个唯一的cypher和认证密钥),然后在每个字符串的末尾附加纯文本“用户名”和“密码”,以帮助我从响应视图控制器识别用户名和密码。你也可以把这个普通字符串改成任何东西,只要你知道它的模式并且它是唯一的。

在我看来,我然后适当地使用这些变量,然后在响应控制器中—通过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",
};

我认为这是一个工作的地狱,但嘿,它的工作,我认为它也可以是未来的证明,除非谷歌确定页面的URL有关键字在它,然后适当地只是添加其愚蠢的扩展在任何输入字段的顶部-但这是一个有点激烈。

如果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>

乔宾的回答让我吃了一惊。以下是对我有效的方法:

<input type="password" name="password" id="password_fake" style="display:none;" />
<input type="password" name="password"/>

确保不要使用autocomplete="off",否则会破坏解决方案。

没有一个解决方案对我有效。最后,在花了好几个小时后,我想出了这个ReactJS的解决方案。

在FireFox 54.0.1, Chrome 61.0.3163.100, Mac OS 10.13上测试

我保留type="text"并将其更改为onChange事件的相关类型。

< p >交货: HTML: < / p >

<input type="text" onChange={this。setAttributes}占位符="Email" /> < /代码> < / p >

JS:

setAttr2: function(e){
var value = e.target.value;
if(value.length){
e.target.setAttribute('type', 'email')
} else {
e.target.setAttribute('type', 'text')
}
}

好吧,因为我们都有这个问题,我花了一些时间来写一个工作的jQuery扩展这个问题。# EYZ0

(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();
});

jsfiddle with tests

# EYZ0:

(不需要javascript,不需要css,不需要隐藏输入)

<form autoComplete="new-password" ... >
<input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

注:

  • 表单不一定是输入元素的直接父元素
  • Input需要一个name属性

我的问题是,Chrome会自动填充邮政编码,在引导自动完成界面,因为我是自动建议可能的值从我的数据库。

我必须做的事情:

  • 将输入字段的id属性更改为“邮政编码”以外的内容
  • 将输入字段的autocomplete值更改为false
  • 在调用$('#postcode_field').autocomplete(...)之后,我不得不用$('#postcode_field').prop('autocomplete', 'false');重置自动完成属性,因为Boostrap的自动完成插件会自动将其更改为off

上面提到的建议我都试过了,但是没有一个管用。我使用谷歌的地方自动完成指定的输入,这是相当丑陋的,如果有谷歌chrome自动填充上面谷歌的地方自动完成列表。甚至设置autocomplete="anything"是无用的,因为autocomplete插件本身setf这个attr为"off",它完全被chrome忽略。

所以我的解决方案是:

var fixAutocomplete = window.setInterval(function(){
if ($('#myinput').attr('autocomplete') === 'false') {
window.clearInterval(fixAutocomplete);
}


$('#myinput').attr('autocomplete', 'false');
}, 500);

使用css text-security:阀瓣而不使用类型=密码

超文本标记语言

<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属性被设置为关闭,浏览器也会继续建议自动补全值。这种出乎意料的行为可能会让开发人员感到困惑。真正强迫非自动补全的技巧是将随机字符串分配给属性,例如:

autocomplete="nope"

我所做的是将输入类型="text"改为多行输入ie。

 overflow-x:hidden;
overflow-y:hidden;
vertical-align:middle;
resize: none;

代码的快速解释:overflow-x和-y隐藏将禁用文本区域框右侧的滚动按钮。垂直algin将使标签垂直中间与文本区域和大小调整对齐:none将禁用文本区域右下方的大小调整抓取器。

在本质上,这意味着你的文本区域将出现像一个文本框,但chrome自动填充关闭。

对于Angular用户:

由于autocomplete = 'off'忽略了新的chrome版本,chrome开发人员建议自动完成= '假|随机字符串',所以谷歌chrome/现代浏览器有2种类型的用户助手-

  1. autocomplete='off'(防止上次缓存的建议)。
  2. autocomplete = 'false | random-string'(防止自动填充设置,因为'random-string'是不知道的浏览器)。

那么该怎么做,在禁用两个恼人的建议的情况下? 诀窍在这里:-

  1. 在每个输入字段中添加autocomplete = 'off' (或简单的Jquery).

# eyz1: # eyz0

    从HTML代码中删除<form name='form-name'>标记,并在<div>容器中添加ng-form = 'form-name'。 添加ng-form="form-name"也将保留所有的验证

我的工作,因为上面没有一个似乎工作在Chrome 63及以上

我在我的网站上通过替换违规的输入元素来解决这个问题

<p class="input" contenteditable="true">&nbsp;</p>

在提交之前使用jQuery填充隐藏字段。

但这确实是一个可怕的黑客,因为铬的一个糟糕的决定。

这是我最近使用的解决方案。

$('#email').prop('autocomplete', true);
自动补全功能已通过此技巧成功禁用。 它的工作原理!< / >强

< em > [HTML] < / em >

<div id="login_screen" style="min-height: 45px;">
<input id="password_1" type="text" name="password">
</div>

(JQuery) < em > < / em >

$("#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);
}


});

我的解决方案取决于三件事:

  1. keydown事件
  2. 屏蔽字段名
  3. 在提交时删除字段值

首先,我们需要防止用户名和密码都自动补全,因此,最初我们将设置两个标志,i ->用户名和j ->密码为真值,因此如果没有任何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>&nbsp;&nbsp;
</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.
});
}

我终于发现成功使用textarea。对于密码字段,有一个事件处理程序替换每个输入“•”的字符。

2016年谷歌Chrome开始忽略autocomplete=off,尽管它在W3C中。# EYZ1:

这里棘手的部分是,在web的某个地方,autocomplete=off成为许多表单字段的默认值,而没有真正考虑这是否对用户有好处。这并不意味着不存在不希望浏览器自动填充数据的有效情况(例如在CRM系统上),但总的来说,我们认为这些是少数情况。因此,我们开始忽略autocomplete=off的Chrome自动填充数据。

本质上说:我们更了解用户想要什么。

当需要autocomplete=off时,他们打开了另一个错误来发布有效的用例

在我所有的B2B应用程序中,我还没有看到与自动完成相关的问题,但只在输入密码类型时出现。

如果屏幕上有任何密码字段,即使是隐藏的,自动填充步骤。 要打破这种逻辑,你可以把每个密码字段放入它自己的形式,如果它不打破你自己的页面逻辑

<input type=name >


<form>
<input type=password >
</form>