How to disable Chrome to autofill username/email password?

Question

I know the question has been answered many times on StackOverflow, but those answers are for older versions of Chrome.

I have Chrome Version 53.0.2785.143.

I want Chrome to disable autofill on password fields.

I have tried all the methods mentioned in older StackOverflow answers.

Method 1:

I tried using fake username passwords.

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

Method 2:

I tried using autocomplete='new-password' and autocomplete='false' and autocomplete='off', but none of those work.

Relegate

i think it is not possible i know only for autocomplete="off" but this isnt solution as you mentioned. only way i think is generating names for your inputs. its just my opinion – Bedizen

This question has already been asked. Please see: #12374942 – Sula

Possible duplicate of Remove the yellow background on input on autofill – Saxecoburggotha

Use JavaScript, try github.com/terrylinooo/disableautofill.js – Madlynmadman

Chrome is searching username/password fields pair. So, basically put autocomplete="new-password" to password field and let pair chain is broken. It used by my side. – Kroo

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

Neolithic

None of this solutions work for me. I have Chrome 57.0.2987.133 (64-bit) running on Windows 10. – Inshrine

@xtiancastro7 i think this isn't work with chrome latest version. please try this.. lifewire.com/disable-autofill-in-google-chrome-4103633 if its work plz put a comment :) – Neolithic

I really hate Chrome's autofill. Of course that I can disable it in my PC. But I can't disable it on every PC where my app will be used, so this is neither a solution =/ – Inshrine

Solution 3 works for me in Chrome 60.0.3112.90. Thanks! – Darlenedarline

Here is what we found, chrome intentionally ignores the autocomplete attribute, see the last answer in the thread bugs.chromium.org/p/chromium/issues/detail?id=468153 – Angling

Adding autocomplete="new-password" is the correct approach as of 9/17/2017. – Hydroid

I know this is not a solution for everybody, but what worked for me was to remove the input component "id" and "name" attributes. OF course, I am using Angular.Js and did not need those attributes anyway. I hope this helps. – Boat

Just rename the field. CHROME detects things like "username" and "password"... so if you name the fields "field_un" and "field_ps" then autofill becomes confused... then I just marry in the real POST values later. (I did come here hoping there was a solution in 2023, lol, gotta play the same game guess) – Addressograph

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.

Indigenous

Of all solutions posted here, it was the only which worked with Chrome 79 and was not feeling hacky. Thank you! – Burnt

not working for password admin – Unduly

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>

Antisepsis

That's a really good solution, for me setting the input as text and using -webkit-text-security:disc; did the job. – Whopper

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

Pino

This works really well at least on Chrome, all of the other solutions are hacky compared to this one. Thanks – Efik

Doesn't work for me in February 2019 when you hide the fields with type="hidden. – Sestina

Answer 5

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

Tricyclic

Answer 6

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>

Tolle

Not work anymore on Chrome... when you focus the field, it auto-fills. – Bergquist

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

Normalcy

Answer 8

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>

Measure

Answer 9

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.

Trashy

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

Dedans

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.

Byword

Answer 12

Very late to answer this question, but any of the above solutions did not work for me, with all browsers.

<input type="email" name="email" id="email" readonly onfocus="this.removeAttribute('readonly');">

It helped me to overcome this issue, as it makes the field read-only first so the browser will not fill it as normal fields, and when the DOM is loaded and the user clicks on that field to fill, it will remove the attribute read-only and save the password on the browser will show as suggestions.

Maraca

Answer 13

The one that worked for me was

If you are using <label> try <label autocomplete="off">

as browser autofill based on label

Sik

Answer 14

This is working in my browsers.

<input
  class="form-control"
  name="user[email]"
  id="user_email"
  type="email"
  placeholder="Enter Email ID"
  value="" ***autocomplete="new-email"***
>

<input
  class="form-control"
  name="user[password]"
  id="user_password"
  placeholder="Enter Password"
  type="password"
  value=""
  ***autocomplete = "new-password"***
>

Littles

Answer 15

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

Sweepstakes

Answer 16

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

here is my working solution: we need two type=password and first hide by external 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):

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

Juniorjuniority

Answer 17

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.

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.

Educe

Should I show a pop-up with tutorial requesting each user to please tun of auto-fill in your browser – Relegate

Sorry, but we are looking for a code-only solution that will work for every single user that comes across this site, instead of a solution that works for just one user. – Outweigh