html - 关闭自动填充 - 浏览器不记住密码




禁用Chrome自动填充 (20)

Mike Nelsons在Chrome 50.0.2661.102中提供的解决方案对我无效。 只需将相同类型的输入元素与display:none设置为不再禁用本机浏览器自动完成。 现在需要复制您希望禁用自动完成的输入字段的名称属性。

另外,为避免输入字段在表单元素内复制,应该在未显示的元素上放置一个禁用对象。 这将阻止该元素作为表单操作的一部分提交。

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

我一直在用几种形式的Chrome自动填充行为遇到问题。

表单中的字段都具有非常普通和准确的名称,例如“email”,“name”或“password”,并且它们也具有autocomplete="off"集。

自动填充标志已成功禁用自动填充行为,其中在您开始输入时出现值的下拉列表,但未更改Chrome自动填充字段的值。

这种行为是可以的,除了chrome不正确地填充输入,例如用电子邮件地址填充电话输入。 客户对此抱怨,因此经过验证发生在多种情况下,而不是像我在本地机器上完成的某些结果那样。

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


我真的不喜欢制作隐藏的领域,我认为这样做会非常困难。

在你想停止自动完成的输入字段上,这将起作用。 使字段只读,并在焦点上删除这样的属性

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

这样做的是,您首先必须通过选择字段来删除只读属性 ,并且当时最有可能您将填充自己的用户输入并弯曲自动填充来接管


I've faced same problem. And here is the solution for disable auto-fill user name & password on Chrome (just tested with Chrome only)

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

In some cases, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really forcing the no-autocompletion is to assign a random string to the attribute , for example:

autocomplete="nope"

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也会在标签元素上考虑“for”属性。它可以用来中断chrome的解析顺序。


The most recent solution of adding autocomplete="new-password" to the password field works great for preventing Chrome from autofilling it.

However, as sibbl pointed out, this doesn't prevent Chrome from asking you to save the password after the form submission completes. As of Chrome 51.0.2704.106, I found that you can accomplish this by adding a invisible dummy password field that also has the attribute autocomplete="new-password" . Note that "display:none" does not work in this case. eg Add something like this before the real password field:

<input type="password" autocomplete="new-password" 
style="visibility:hidden;height:0;width:1px;position:absolute;left:0;top:0">`

This only worked for me when I set the width to a non-zero value. Thanks to tibalt and fareed namrouti for the original answers.


以下是我提出的解决方案,因为Google坚持重写人们似乎做出的每一项工作。

选项1 - 点击所有文字

将输入的值设置为用户示例(例如[email protected] )或字段标签(例如Email ),并将名为focus-select的类添加到输入中:

<input type="text" name="email" class="focus-select" value="[email protected]">
<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注释,以便其他开发人员不会将其删除! 同时确保隐藏输入的名称是相关的。


你必须添加这个属性:

autocomplete="new-password"

来源链接: 全文


如果您在保留占位符时遇到问题,但禁用了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/



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

<input type="text">

其次是:

<input type="password">

通过使这个失效来简单地打破这个过程:

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

对我而言,简单

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

做到了。

测试多个版本,最后一次尝试是在56.0.2924.87


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

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

我不知道为什么,但autocompelete =“新密码”禁用自动填充。 它在最新的49.0.2623.112 chrome版本中工作。


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

有时甚至是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/

// UpdateEnd

说明:浏览器自动将凭据填充到错误的文本字段?

填写不正确的输入,例如用电子邮件地址填写电话输入

有时我会注意到Chrome和Safari上的这种奇怪行为,当时有相同形式的密码字段 我想,浏览器会查找一个密码字段来插入您保存的凭据。 然后它将用户名自动填充到最近的文本类型输入字段中,该字段出现在DOM中的密码字段之前 (只是由于观察而猜测)。 由于浏览器是最后一个实例,您无法控制它,

这只读修复上面为我工作。


根据Chromium错误报告#352347 Chrome不再在表单和输入上尊重autocomplete="off|false|anythingelse"

我唯一的解决方案是添加一个虚拟密码字段

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

试试下面的jQuery代码,它已经为我工作。

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

这是一个肮脏的黑客 -

你有你的元素(添加禁用的属性):

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

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

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

这有两件事。 Chrome浏览器和其他浏览器会记住以前输入的字段名称值,并根据该值为用户提供自动完成列表(值得注意的是,由于相当明显的原因,密码类型输入永远不会以这种方式记住)。 您可以添加autocomplete="off"以防止出现这种情况,例如您的电子邮件字段。

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


通过设置autocomplete off应该在这里工作,我有一个谷歌在搜索页面使用的例子。 我从检查元素中找到了这个。

编辑 :如果off不起作用,然后尝试falsenofill 。 在我的情况下,它使用的是Chrome版本48.0





autofill