How to disable Chrome to autofill username/email password?

Question

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

I have Chrome Version 53.0.2785.143.

I want to disable Chrome to autofill password fields,

I have tried all methods mentioned in older SO answers,

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'

But none of it works.

Answer 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 :)

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

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.

Solution 3

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

Tested and works in Chrome 53

Solution 4

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

Answer 2

According to Mozilla doc, In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form.

you have to use

autocomplete = "new-password"

When creating a new account or changing passwords, this should be used for an "Enter your new password" or "Confirm new password" field, as opposed to a general "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password

You can see all autocomplete values here for reference and better understanding.

Answer 3

Simple alternative solution

I also ran into this problem, and as of May 22, 2020, I couldn't find a way of making my webapp to avoid filling out the password field, so I found an alternative to this, here it is:

On the input field where the user puts its password, change its type to text, this will avoid having all saved passwords for the application to pop up, then style the input to make it look like a conventional password input by adding:

style="text-security:disc; -webkit-text-security:disc;"

Example:

It is as simple as changing:

<input type="password">

to:

<input type="text" style="text-security:disc; -webkit-text-security:disc;">

or even more, you can omit the type attribute:

<input style="text-security:disc; -webkit-text-security:disc;">

Cheers!

Update:

As pointed out in the comments, this solution doesn't work on Firefox, see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security, although the original question only asks for a solution on Chrome, I found a new solution (not sure if useful for everyone): I created a font composed only by disks (emulating the password field) and seems to work, please note that I'm not an expert creating fonts, I did my best. I have not tested this solution carefully, but at first glance seems to do the job. Link to the font, made by me using Font Forge: https://drive.google.com/file/d/1xWGciDI-cQVxDP_H8s7OfdJt44ukBWQl/view?usp=sharing

Please test this out and let me know if it woks.

Example

Put the ttf file in the same directory where you create the html file

<!DOCTYPE html>
<html>
    <head>
        <title>Font Test</title>
    </head>
    <body>
        <span>Custom font</span><input class="disk-font" type="text"/>
        <span>Normal Font</span><input type="password"/>
    </body>
    <style>
            @font-face {
                font-family: disks;
                src: url(disks.ttf);
            }
            .disk-font{
                font-family: disks;

            }
    </style>
</html>

Answer 4

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.
3. Add an autocomplete attribute with a value of current-password for the password field on a sign-in form.
4. Add an autocomplete attribute with a value of new-password for the password field on sign-up and change-password forms.

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

Answer 5

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.

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)

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

Answer 6

I didn’t get success until I wrap my input with form

Answer 7

In Chrome 87 To prevent Chrome from autofill, The combination of three approaches fixed the problem almost entirely

1. add autocomplete='chrome-off' to input tags and form tag. In case of Rails's form helpers, I needed to use JS to setAttribute('autocomplete', 'chrome-off') after page loaded

2. If some autocomplete/autofill feature remainings are still present (fill the same form few times to check it), add prefix _ to name attribute. In my case it was <input name='user[_country]'

3. For locales other than English, some remainings of autofill were still present. Adding another underscores in name attribute helped with it, i.e. <input ... name='user[_c_ountr_y]'

EDIT:

4. in production, where user input is cached, it turned out that also this step was needed to prevent chrome autofill dropdown

Answer 8

Stop using the word "user" to name the field, for example, if you use "user-action" change to "u-action", Google will stop offering email or username to this field.

Answer 9

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.

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

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="[email protected]" disabled>
    <input id="password" type="password" name="password" disabled>
    
    <script>
    $(document).ready(function(){
         setTimeout(
            function(){
                $('#myform input[disabled]').removeAttr('disabled');
            }, 1000);
    );
    </script>

Answer 10

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:

HTML

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

JS

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

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

Answer 11

For me as of 22/02/2019, I tried these but not got a working solution. I tried with visibility, display, autocomplete and seems like its not working. May be I am missing something as I am using Material UI.

For me I got two solution working. This is JSX code you can use the same property with native html css syntax

1) with opacity and position

 <input type="email" style={{opacity:"0", position:"absolute"}}/>
 <input type="password" style={{opacity:"0", position:"absolute"}}/>

2) with z-index and position

<input type="email" style={{zIndex:":-100", position:"absolute"}}/>
<input type="password" style={{zIndex:"-100", position:"absolute"}}/>

Hope this will save someone's time.

Answer 12

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