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.

Answer 1

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

Answer 2

The one that worked for me was

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

as browser autofill based on label

Answer 3

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.

Answer 4

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 5

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 6

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

Answer 7

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

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

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 10

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 11

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

Answer 12

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

Answer 13

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 14

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 15

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 16

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