如何禁用Chrome以自动填充用户名/电子邮件密码？

I know its been answered many times on SO but that is for older versions of Chrome.

我知道它在SO上已被多次回答,但这适用于旧版本的Chrome。

I have Chrome Version 53.0.2785.143.

我有Chrome版本53.0.2785.143。

I want to disable Chrome to autofill password fields,

我想禁用Chrome以自动填充密码字段,

I have tried all methods mentioned in older SO answers,

我已经尝试了旧的SO答案中提到的所有方法,

Method 1:

Tried using fake username passwords.

尝试使用假用户名密码。

<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

Method 2:

Tried using autocomplete='new-password' and autocomplete='false' and autocomplete='off'

尝试使用autocomplete ='new-password'和autocomplete ='false'并自动完成='关闭'

But none of it works.

但它都不起作用。

9 个解决方案

#1

Try this 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="" />

You can also use jQuery to solve this problem,hope this will be helped to you,if not please put a comment here,good luck :)

你也可以用jQuery来解决这个问题,希望这对你有所帮助,如果不是请在这里发表评论,祝你好运:)

Update:

This is depend on chrome version,sometimes this will be not work for chrome new versions,so you should have try many things to prevent this problem,try these code snippets also and please put a comment what happened :)

这取决于chrome版本,有时这对chrome新版本不起作用,所以你应该尝试很多东西来防止这个问题,也尝试这些代码片段并请发表评论发生了什么:)

Solution 2

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

It removes "name" and "id" attributes from elements and assigns them back after 1ms. Put this in document get ready.

它从元素中删除“name”和“id”属性,并在1ms后将其分配回来。把它放在文件准备好了。

Solution 3

<input type="text" name="email">
<input type="password" name="password" autocomplete="new-password">

Tested and works in Chrome 53

经过测试并可在Chrome 53中使用

Solution 4

try autocomplete="false" instead of autocomplete="off" or nofill

尝试autocomplete =“false”而不是autocomplete =“off”或nofill

#2

1. Add an autocomplete attribute with a value of username for usernames.

添加自动填充属性,其值为用户名的用户名。

2. If you've implemented an "email first" sign-in flow that separates the username and password into two separate forms, include a form field containing the username in the form used to collect the password. You can, of course, hide this field via CSS if that's appropriate for your layout.

如果您已实现将用户名和密码分隔为两个单独表单的“首先发送电子邮件”登录流程,请在用于收集密码的表单中包含一个包含用户名的表单字段。当然,如果适合您的布局,您可以通过CSS隐藏此字段。

3. Add an autocomplete attribute with a value of current-password for the password field on a sign-in form.

在登录表单中为密码字段添加一个autocomplete属性,其值为current-password。

4. Add an autocomplete attribute with a value of new-password for the password field on sign-up and change-password forms.

在注册和更改密码表单上为密码字段添加值为new-password的自动完成属性。

5. If you require the user to type their password twice during sign-up or password update, add the new-password autocomplete attribute on both fields.

   如果您要求用户在注册或密码更新期间键入两次密码,请在两个字段中添加新密码自动完成属性。

   <input type="text" autocomplete="username">
   <input type="password" autocomplete="current-password">
   

#3

Chrome will only autofill a password if the input type="password" - it would otherwise risk exposing the user's password in plain text. So, use type="text" on the input field, and then change the type attribute to "password" when the user focuses on the input.

如果输入类型=“密码”,Chrome将仅自动填写密码 - 否则可能会以明文形式泄露用户密码。因此,在输入字段上使用type =“text”,然后在用户关注输入时将type属性更改为“password”。

Password Field:

<input type="text" class="form-control" placeholder="Password"
    onfocus="this.setAttribute('type', 'password')" />

Full Example: (using Bootstrap 3 classes and Font Awesome icons)

完整示例:(使用Bootstrap 3类和Font Awesome图标)

<form>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Email Address" />
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Password" 
            onfocus="this.setAttribute('type', 'password')" />
    </div>
    <div class="text-xs-center">
        <button type="submit" class="btn btn-primary" style="width: 100%;">
            <i class="fa fa-lock" style="padding-right: 10px;"></i> LOG IN
        </button>
    </div>
</form>

#4

In a scenario where the admin wants to change user's email/password the auto-fill replaced the users' email with the admin's and filled admin's password.

在管理员想要更改用户的电子邮件/密码的情况下,自动填充用管理员和填写的管理员密码替换用户的电子邮件。

What worked for me was to set the fields (email, password ...) to disabled and enable them with tiemout a second after the page is loaded. In such way they become available to the user after the browser autofill ignored them.

对我有用的是将字段(电子邮件,密码...)设置为禁用,并在加载页面后一秒钟启用tiemout。以这种方式,在浏览器自动填充忽略它们之后,用户可以使用它们。

The risk is that something breaks the js and they remain unavailable.

风险是某些东西打破了js并且它们仍然不可用。

If your server part doesn't depend much on the input names, I would recommend just to change them to differ from those used in the login form - they will be not auto filled (unless you request it specifically).

如果您的服务器部分不太依赖于输入名称,我建议只将它们更改为与登录表单中使用的不同 - 它们不会自动填充(除非您特别要求)。

Otherwise here is the example code:

否则这里是示例代码:

 <input id="email" type="email" name="email" value="[e-mail]" disabled>
    <input id="password" type="password" name="password" disabled>

    <script>
    $(document).ready(function(){
         setTimeout(
            function(){
                $('#myform input[diabled]').removeAttr('disabled');
            }, 1000);
    );
    </script>

#5

One potential solution for this could be to initially set the input type to "text", and then add an event listener for the input that updates the type to "password" once the field is edited. This would allow you to retain all of the features of a password input and hopefully circumvent any password autofills / managers. Something like:

一个可能的解决方案是初始将输入类型设置为“text”,然后为输入添加一个事件侦听器,一旦编辑了字段,就会将类型更新为“password”。这将允许您保留密码输入的所有功能,并希望绕过任何密码自动填充/管理器。就像是:

HTML

<input type='text' class='my-input' />

JS

const input = document.querySelector('.my-input');

input.addEventListener('keydown', () => {
    input.setAttribute('type', 'password');
});

#6

Use jQuery disableAutoFill plugin

使用jQuery disableAutoFill插件

$('#login-form').disableAutoFill();

Document: https://github.com/terrylinooo/jquery.disableAutoFill

Demo: https://terrylinooo.github.io/jquery.disableAutoFill/

#7

I've finally found success using a textarea with an event handler that replaces each character typed with a "•".

我终于使用带有事件处理程序的textarea找到了成功,该事件处理程序替换了用“•”键入的每个字符。

#8

unfortunately nothing worked for me (win10, opera/chomium) no "new-password", no other solutions... there was also problem with inline style, when it was hidden by this, autocomplete progressed

不幸的是没有什么对我有用(win10,opera / chomium)没有“新密码”,没有其他解决方案......内联样式也存在问题,当它被隐藏时,自动完成进展

here is my working solution: we need two type=password and first hide by external css

这是我的工作解决方案:我们需要两个type = password,然后首先通过外部css隐藏

<input type="password" class="vapor zero">
<input
    id="hes"
    type="password"
    placeholder="actual password"
    autocomplete="off"
    autocomplete="false"
    autocorrect="off"
    name="password2"
    value=""
    autocomplete="new-password"
    required>

css:

.zero{
    width:0px !important;
    height:0px !important;
    padding:0 !important;
    border:1px solid white;
}

jquery killer (just for sure):

jquery杀手(只是肯定):

$(".vapor").fadeOut(5400, function() {
    $(this).remove();
});

#9

You May Try This Way.

你可以尝试这种方式。

Turn off Autofill If you don’t want to see saved personal information every time you fill out a form, you can turn Autofill off.

关闭自动填充如果您不希望每次填写表单时都看到保存的个人信息,则可以关闭自动填充。

Open Chrome. At the top right, click More More and then Settings.

打开Chrome。在右上角,单击“更多”,然后单击“设置”。

At the bottom, click Show advanced settings.

在底部,单击“显示高级设置”。

Under "Passwords and forms," uncheck "Enable Autofill to fill out web forms in a single click." To turn Autofill back on, check the box again.

在“密码和表单”下,取消选中“启用自动填充功能,只需单击一下即可填写Web表单”。要重新打开自动填充,请再次选中此框。