禁用Chrome自动填充

menim 发布于 2019-03-07 autocomplete 最后更新 2019-03-07 13:38 59 浏览

我一直在用几种形式的Chrome自动填充行为遇到问题。 表单中的字段都具有非常普通和准确的名称,例如“email”,“name”或“password”,并且还设置了autocomplete="off"。 自动填充标志已成功禁用了自动填充行为,其中在您开始输入时出现值的下拉列表,但没有更改Chrome自动填充字段的值。 这种行为是可以的,除了chrome不正确地填充输入,例如用电子邮件地址填充电话输入。客户对此抱怨,因此经过验证发生在多种情况下,而不是像我在本地机器上完成的某些结果那样。 我能想到的唯一的当前解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是一个相当不合理的解决此问题的方法。是否有任何标签或怪异改变了可用于解决此问题的自动填充行为?

已邀请:

qenim

赞同来自:

尝试以下适用于我的jQuery代码。

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

daut

赞同来自:

我正在添加这个位以获得不同的观点。为什么不honeypot it to stop Chrome from botting your fields?它对我来说似乎是跨浏览器。值得一试:

Place an input above your other fields you do not want filled. Set the style to display none and the end user will not ever know it's there. Also no yellow boxes.
<input type="password" style="display:none;">

nsunt

赞同来自:

如果要实现搜索框功能,请尝试将type属性设置为search,如下所示:

<input type="search" autocomplete="off" />
这对我在Chrome v48上有用,看起来是合法的标记: https://www.w3.org/TR/html-markup/input.search.html

set

赞同来自:

我遇到了“现在登录或注册”模式窗口的问题,如果用户已将其凭据保存到浏览器,则会出现问题。登录和注册字段都已填充,因此我可以使用以下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的一些以前的答案基本相同,但是以有角度的方式完成。

det

赞同来自:

对我来说,简单

<form autocomplete="off" role="presentation">
做到了。 测试了多个版本,最后一次尝试是在56.0.2924.87上

wodio

赞同来自:

最后我想我找到了一个不错的解决方案。更好地了解下拉列表如何与Chrome配合使用有帮助:)基本上,当您输入焦点输入时以及当您键入与Chrome在内存中匹配的条目时生成鼠标按下事件时,将显示下拉列表。牢记这一点,并且当Chrome有默认名称(如“name”,“email”等)时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属性访问输入。这意味着我们需要在每次输入后立即返回名称。这个解决方案基本上是基于第一个解决方案。在这种情况下,我们将在键上添加名称,并将其放回到键盘上。我认为这与“自动完成关闭”行为的兼容性更为简洁。无论如何这是代码:
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);
});
Please notice that for Solution 1 and 2, I just took the cases where the input name is "name" and "email". For any other case where this attribute makes Chrome generate the dropdown you will have to add it in the selector for the mouse down event.
解决方案3 这个解决方案更加混乱。我没有意识到我们试图纠正的行为只是基于那些具有特定名称的输入,如“姓名,电子邮件等”。此解决方案的方法是针对这种情况,Chrome显示我们不知道的其他名称。这将是一个非常通用的解决方案。我不喜欢其他2,主要是因为当我们按下删除键时可能会有一个小的闪烁。我会解释一下。 我发现第二次单击输入后出现下拉列表,但第一次将焦点放在输入上时,第一次单击时没有出现下拉列表。我为所有这些元素绑定一个“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建议相符...这有点棘手。我刚刚决定在用户​​输入时替换输入的默认行为。下拉列表评估鼠标按下时的输入,因此我会阻止字母数字,空格等的默认行为。唯一的问题是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();
}
正如我所说,这个解决方案更加混乱。这是我用过的第一个,直到我意识到某些输入名称出现了下拉列表。 很抱歉写这么多,我只是想确保一切都很清楚。我希望它有所帮助。

nfugit

赞同来自:

我刚刚发现,如果您有一个记住的网站用户名和密码,当前版本的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);

wsed

赞同来自:

<input readonly onfocus="this.removeAttribute('readonly');" type="text">
将readonly属性添加到标记以及删除它的onfocus事件可以解决问题

nquis

赞同来自:

Chrome最新版本忽略了autocomplete = off,仍然可以使用“--disable-ignore-autocomplete-off”关闭自动完成功能:

<input type="text" name="mytext" --disable-ignore-autocomplete-off" autocomplete="off">
要么 :
<form methid="" name="myform" --disable-ignore-autocomplete-off" autocomplete="off">

trerum

赞同来自:

而不是“这对我有用”答案和其他看起来像完全黑客的答案......这是目前chrome(和最新规范)将如何处理input元素上的autocomplete属性: https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=en TLDR:在输入上添加autocomplete='<value>',其中<value>应该是定义字段用途的任何字符串。这与name属性的工作方式类似。尽可能使用上面链接中的建议值。 另外,从表单中删除自动填充属性

et_et

赞同来自:

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

<input type="text">
其次是:
<input type="password">
简单地通过使此无效来打破此过程:
<input type="text">
<input type="text" onfocus="this.type='password'">

overo

赞同来自:

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

ased

赞同来自:

之前输入的由chrome缓存的值显示为下拉列表选择列表。可以通过autocomplete = off禁用此功能,当地址字段获得焦点时,chrome的高级设置中显式保存的地址会自动填充弹出窗口。可以通过autocomplete =“false”禁用此功能。但它允许chrome在下拉列表中显示缓存值。 在输入html字段后面将关闭两个。 Role="presentation" & autocomplete="off" 在为地址自动填充选择输入字段时,Chrome会忽略那些没有前面标签html元素的输入字段。 为确保chrome解析器忽略自动填充地址弹出的输入字段,可以在标签和文本框之间添加隐藏按钮或图像控件。这将打破自动填充的标签 - 输入对创建的chrome解析序列。 解析地址字段时会忽略复选框 Chrome还会在label元素上考虑“for”属性。它可以用来打破chrome的解析序列。

eipsum

赞同来自:

这对我来说和2015年12月一样有用 将autocomplete="false"放在表单元素上对Chrome没有任何意义。如果要使用此功能,则必须输入要关闭此功能的特定元素。 I.E.

<input id="state" type="text" name="state"
 autocomplete="false">
尝试一切后,这对我来说就像一个魅力!

yeum

赞同来自:

纯HTML解决方案: (不需要javascript,不需要css,也不需要隐藏输入)

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>
笔记:
  • form不一定需要是input元素的直接父元素
  • 输入需要名称属性
PS:我回答了同样的问题here

tvelit

赞同来自:

通过将autocomplete设置为off应该可以在这里工作,我有一个google在搜索页面中使用的示例。我从inspect元素中找到了这个。 enter image description here 编辑: 如果off无效,请尝试falsenofill。在我的情况下,它使用chrome版本48.0

stotam

赞同来自:

我的解决方案

$(function(){
    $("form[autocomplete=off]").find('input').attr('autocomplete', 'false');
});
它在具有'autocomplete =“off”'的表单中的所有输入字段上设置属性'autocomplete =“false”'。 这适用于chrome,firefox和safari。

qquod

赞同来自:

尝试在值中填充空格:

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

yut

赞同来自:

我真的不喜欢制作隐藏的字段,我认为制作它会让它变得非常混乱。 在您要从自动完成停止的输入字段上,这将起作用。使字段只读并在焦点上删除该属性,如下所示

<input readonly onfocus="this.removeAttribute('readonly');" type="text">
这样做的第一步是你必须通过选择字段来删除只读属性,那时你很可能会填充你自己的用户输入并弯下自动填充来接管

somnis

赞同来自:

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

<input type="password" name="pwd" autocomplete="new-password">
我不知道为什么,但autocompelete =“new-password”禁用自动填充。它工作在最新的49.0.2623.112铬版本。

iaut

赞同来自:

根据Chromium bug report #352347,Chrome不再尊重autocomplete="off|false|anythingelse",无论是在表单上还是在输入上。 对我有用的唯一解决方案是添加一个虚拟密码字段:

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

dsed

赞同来自:

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

frerum

赞同来自:

以下是我提出的解决方案,因为谷歌坚持要覆盖人们似乎所做的每一项工作。

选项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清除它。您可以将密码值留空。 如果用户由于某种原因没有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注释,以便其他开发人员不删除它!还要确保隐藏输入的名称是相关的。

inemo

赞同来自:

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的原始答案。

nfugit

赞同来自:

以为我会发布我的修复。发现你不能使用display:none所以我提出了一个快速而肮脏的解决方案,只是让假输入变小并将其移出视线。到目前为止一直很好,直到他们再次打破它。

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

dmodi

赞同来自:

经过数月和数月的奋斗,我发现解决方案比你想象的要简单得多: 而不是autocomplete="off"使用autocomplete="false";) 就这么简单,它就像谷歌Chrome中的魅力一样!

het

赞同来自:

尝试这个。我知道这个问题有些陈旧,但对于这个问题,这是一种不同的方法。 我还注意到问题出现在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="" />
希望它会帮助某人。

nodio

赞同来自:

Jobin Jose的回答给了我一个开始。这对我有用:

<input type="password" name="password" id="password_fake" style="display:none;" />
<input type="password" name="password"/>
确保没有autocomplete =“off”,这会破坏解决方案。

met

赞同来自:

如果您在保留占位符但禁用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; 
}
http://jsfiddle.net/mwshpx1o/1/

mneque

赞同来自:

我的黑客 - 在Chrome 48中测试: 由于Chrome会尝试通过查看<input>idname属性以及相关的<label>内容来查找字段类型,因此您只需为这些内容找到无意义的名称。 对于idname,可以轻松选择未列出的其他内容here。 对于label,我在中间插入了一个不可见的<span>,例如对于一个城市(它正在弄乱我的Places autocomplete)

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

oad

赞同来自:

对于新的Chrome版本,您只需将autocomplete="new-password"放入密码字段即可。我检查过,工作正常。 在此讨论中得到了Chrome开发人员的提示: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7 附:不要忘记为不同的字段使用唯一的名称来防止自动填充。

xminus

赞同来自:

这有两件事。 Chrome和其他浏览器会记住以前输入的字段名称值,并根据该值向用户提供自动填充列表(特别是,密码类型输入永远不会以这种方式记住,原因相当明显)。您可以添加autocomplete="off"以防止在您的电子邮件字段之类的内容。 但是,您有密码填充程序。大多数浏览器都有自己的内置实现,并且还有许多提供此功能的第三方实用程序。这个,你无法阻止。这是用户自己选择保存此信息以便以后自动填写,并且完全超出了应用程序的范围和影响范围。

pculpa

赞同来自:

为了它的价值,我写了一个jQuery插件(虽然非常重手),阻止Chrome触发表单字段上的自动填充。 GitHub -> jquery.prevent-autofill.js 它使用与Yared Rodriguez在他的回答中描述的技术类似的技术。基本上,绑定到输入上的事件并手动处理它们,以便将它们隐藏在Chrome的自动填充触发器中。 我写这篇文章是为了确保我正在处理的项目关闭了自动填充功能,因为这是一项艰难的要求。该项目包含一个用于共享计算机的个人数据(包括地址)表格,因此自动填充对我们来说是一个非常严重的问题。 我尝试了其他所有建议的内容,而Chrome则忽略了所有内容。只要我的表单包含所有标准地址字段(名称,地址,城市,州,邮政),Chrome就会忽略我设置的所有“自动完成”属性,无论值(关/假)如何。 我的问题更复杂,因为我有字段名称和占位符,这两者似乎都被Chrome的自动填充启发式选择。 如果它对某人有帮助,那很好。如果你认为这是一个可怕的黑客,那也没关系。我花了一个星期的时间把头发拉出来试图让Chrome表现出来,这对我有用,所以我想我会分享。

paut

赞同来自:

就像Dvd Franco所说,对我来说,只在所有领域都使用autocomplete ='off'。所以我把这个jquery规则放在$(document).ready();在我的主.js文件上运行 CODE_0的PLACEHOLDER

uid

赞同来自:

我发现将其添加到表单会阻止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已经确定它比开发人员更了解何时自动完成。有一个真正的微软感觉。

zcum

赞同来自:

我终于通过在输入字段中放入一个非重复变量来解决这个问题 - 我使用php time(),如下所示:

<input type="text" name="town['.time().']" >
这主要是干扰n android。我在服务器端做的只是在输入名称上做一个foreach循环 - 问题是如果chrome识别它将自动填充的name属性。 没有别的东西对我有用。

vsit

赞同来自:

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

<input type = 'text' value = ' ' name = 'username' />
如果您使用用户输入的值填充用户名,则在没有用户输入值的情况下输入“”代码。 编辑:我还必须更改“用户名”字段,使其名称不是“用户名”,例如'nameofuser'

menim

赞同来自:

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

ea_qui

赞同来自:

如果您使用的是Symfony表单,则如果从树枝模板应用属性而不是使用FormBuilder,则autocomplete=off将无效。 用这个:

....
->add('field-name', TextType::class, array(
  'attr' => array(
      'autocomplete' => 'off'
  )
)
....
而不是:
....
{{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....

det

赞同来自:

通过添加“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"/>

ut_est

赞同来自:

它是如此简单和棘手:) 谷歌浏览器基本上搜索<form><body><iframe>标签内的每个第一个可见密码元素,以启用它们的自动重新填充,因此要禁用此功能,您需要添加一个虚拟密码元素,如下所示:

    • 如果您在<form>标记内的密码元素需要在<form>打开标记后立即将虚拟元素作为表单中的第一个元素
    • 如果您的密码元素不在<form>标记内,则在<body>打开标记后立即将虚拟元素作为html页面中的第一个元素
  1. 您需要隐藏虚拟元素而不使用css display:none,因此基本上使用以下作为虚拟密码元素。
    <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
    

id_aut

赞同来自:

显然,最好的解决方案/黑客现在不再工作了。我使用的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()和密码将被添加到输入框中,然后作为密码隐藏。但是,当我的密码被删除时,输入框中的密码是哈希密码,不应该被发回服务器 - 不小心保存哈希哈希密码对于尝试登录的人来说会很痛苦。基本上...... 。如果使用此方法,请记住在呈现输入框之前将密码设置为空字符串。

ramet

赞同来自:

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

oqui

赞同来自:

在谷歌C​​hrome 37上使用jQuery禁用自动填充:

   $(window).ready(function () {
$('#UserName').val(' ').val('');
            $('#Password').val(' ').val('');
});
我试过$(document).ready但它不起作用! 我还必须在表单标记中添加属性autocomplete =“off”。

inisi

赞同来自:

好吧,因为我们都有这个问题,我花了一些时间为这个问题编写一个有效的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();
});
jsfiddle with tests

zcum

赞同来自:

对于chrome,如果您在标签内包含带有标签的输入,请输入street,address或两者,它将忽略禁用自动填充的任何尝试。

<label for="searchAddress" class="control-label"> Street Address <input type="text" class="form-control" name="searchAddress></label>
Chrome会检测标签中的关键字以确定输入类型。它也可能与其他关键词一起做到这一点。

enemo

赞同来自:

繁荣,谷歌Chrome和其他任何人尝试打败这个。 我能够在2017年9月7日实现这个,但是使用在我的MVC视图中生成的随机字符串的FormCollection。 我首先在我的登录页面的索引控制器中获得一个新的随机密钥,加密并创建一个新的完全唯一的随机字符串(我实际上使用256位密码执行此操作,以及一个唯一的密码和身份验证密钥),然后我追加纯文本'Username'和'Password'在每个字符串的末尾,以后帮助我从repsonding视图控制器中识别用户名和密码。只要您知道模式并且它是唯一的,您也可以将该纯字符串更改为任何内容。 在我看来,然后我适当地使用这些变量然后在响应控制器中 - 通过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中有关键词,然后适当地只是在任何输入字段的顶部添加其愚蠢的扩展 - 但这有点激烈。

wearum

赞同来自:

我正在使用angular2,它通过简单的显示修改了一个表单和解决方案:none在这里不起作用。我使用替代解决方案:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="position: absolute; top: -10000px" type="text" name="fakeusernameremembered"/>
<input style="position: absolute; top: -10000px" type="password" name="fakepasswordremembered"/>

hquia

赞同来自:

这是一个肮脏的黑客 - 这里有你的元素(添加disabled属性):

<input type="text" name="test" id="test" disabled="disabled" />
然后在你的网页底部放一些JavaScript:
<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

wsed

赞同来自:

不同的解决方案,基于webkit。如前所述,只要Chrome找到密码字段,它就会自动填充电子邮件。 AFAIK,这与autocomplete = [无论如何]无关。 为了避免这种情况,请将输入类型更改为文本,并以您想要的任何形式应用webkit安全性字体。

.secure-font{
-webkit-text-security:disc;}
<input type ="text" class="secure-font">
从我可以看到,这至少与输入类型=密码一样安全,它的复制和粘贴安全。然而,通过删除将删除星号的样式很容易,当然输入类型=密码可以很容易地更改为控制台中的输入类型=文本以显示任何自动填充的密码,所以它实际上是相同的。

lnon

赞同来自:

您必须添加此属性:

autocomplete="new-password"
来源链接:Full Article

zquia

赞同来自:

有时即使autocomplete = off也不会阻止将凭据填入错误的字段。所以它填补了一些领域,但不是用户或昵称!? 修复:浏览器通过只读模式自动填充并在焦点上设置可写

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
(焦点=鼠标单击并通过字段标记) 更新: Mobile Safari将光标设置在字段中,但不显示虚拟键盘。 New Fix像以前一样工作,但处理虚拟键盘:
<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 说明:浏览器自动将凭据填充到错误的文本字段?
filling the inputs incorrectly, for example filling the phone input with an email address
当有相同形式的密码字段时,有时我会在Chrome和Safari上发现这种奇怪的行为。我猜,浏览器会查找密码字段以插入您保存的凭据。然后它将用户名自动填充到最近的textlike-input字段中,该字段出现在DOM中的密码字段之前(仅因为观察而猜测)。由于浏览器是最后一个实例,您无法控制它, 上面的readonly-fix对我有用。 更新:纯JavaScript,不需要jQuery。

zfugit

赞同来自:

我尝试了很多解决方案,似乎谷歌的更新可能已经改变,截至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>

xest

赞同来自:

不幸的是,没有一个解决方案似乎有效。我能够删除电子邮件(用户名)

                    <!-- 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"/>
技术,但密码仍然填充。

baut

赞同来自:

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

sit_in

赞同来自:

我知道这不完全相关,但这就是我所做的。 自动填充字段会引发“更改”事件,但前提是您尽早将其绑定到它们。 所以我把它放在头部。

  $(document).ready(function(){
            $('input').on('change',function(){$(this).val('')})
     }); 
它对我有用。

yet

赞同来自:

因为显示似乎不再起作用 添加

<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>
在溢出隐藏的div中,max-width& max-height 0px 所以它变成了:
<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
    <input type="text" name="fakeusernameremembered"/>
    <input type="password" name="fakepasswordremembered"/>
</div>

bnemo

赞同来自:

对我有用的唯一方法是:(需要jQuery)

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

xnobis

赞同来自:

这些解决方案都不适合我。最后,把我的头发拉出来好几个小时后,我想出了这个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')
    }
  }

hquia

赞同来自:

永远有效

jQuery(document).ready( function($) {
$(window).load( function(){
$('input').val( ' ' ); setTimeout( function(){ $('input').val( '' ); }, 20 );
});
});

ueum

赞同来自:

你可以简单地设置value =“”。这将清空您的输入!像这样的东西:

<input type="text" value=" ">

ket

赞同来自:

除了autocomplete =“off”之外,还必须将值设置为empty(value =“”)才能使其正常工作。

cut

赞同来自:

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

ut_quo

赞同来自:

这些问题的其他解决方案都没有为我工作。 唯一有效的是PLACEHOLDER FOR CODE_0:

It removes "name" and "id" attributes from elements and assigns them back after 1ms. Put this in document get ready.
$(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);
            });
});