41

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.

5

17 Answers 17

35

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

8
  • None of this solutions work for me. I have Chrome 57.0.2987.133 (64-bit) running on Windows 10. Apr 19, 2017 at 14:09
  • 5
    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 =/ Apr 20, 2017 at 13:10
  • 10
    Solution 3 works for me in Chrome 60.0.3112.90. Thanks! Aug 23, 2017 at 20:31
  • 1
    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
    – Harry
    Sep 6, 2017 at 9:07
  • 7
    Adding autocomplete="new-password" is the correct approach as of 9/17/2017.
    – kjdion84
    Sep 17, 2017 at 7:51
21

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.

2
  • 1
    Of all solutions posted here, it was the only which worked with Chrome 79 and was not feeling hacky. Thank you! Jan 21, 2020 at 17:17
  • not working for password admin Nov 28, 2021 at 19:32
12

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>
1
  • That's a really good solution, for me setting the input as text and using -webkit-text-security:disc; did the job. Oct 17, 2020 at 8:42
3
  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">
    
2
  • This works really well at least on Chrome, all of the other solutions are hacky compared to this one. Thanks Feb 9, 2018 at 11:17
  • 1
    Doesn't work for me in February 2019 when you hide the fields with type="hidden.
    – AlexioVay
    Feb 16, 2019 at 16:20
3

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

2

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>
1
  • 5
    Not work anymore on Chrome... when you focus the field, it auto-fills.
    – Arvy
    Dec 6, 2017 at 21:38
2

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:

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

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.

0
1

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

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

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.

0

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.

0

The one that worked for me was

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

as browser autofill based on label

0

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

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

0
-3

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

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.

2
  • 10
    Should I show a pop-up with tutorial requesting each user to please tun of auto-fill in your browser
    – Umair Ayub
    Oct 23, 2016 at 6:35
  • 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.
    – Caleb Liu
    Jul 9, 2022 at 12:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.