Autocomplete off vs false?

Solution 1:

You are right. Setting the autocomplete attribute to "off" does not disable Chrome autofill in more recent versions of Chrome.

However, you can set autocomplete to anything besides "on" or "off" ("false", "true", "nofill") and it will disable Chrome autofill.

This behavior is probably because the autocomplete attribute expects either an "on" or "off" value and doesn't do anything if you give it something else. So if you give it something other than those values, autofill falls apart/doesn't do anything.

With the current version of Chrome it has been found that setting the autocomplete attribute to "off" actually works now.

Also, I have found that this only works if you set the autocomplete attribute in each <input> tag of the form.

There has been a response to this ambiguity in the Chromium bug listings here.

Disclaimer: This was found to be true in Chrome version 47.0.2526.106 (64-bit)

Solution 2:

After Chrome version 72.XX:

Chrome ignores autocomplete="off" autocomplete="no-fill" or autocomplete="randomText" both on field and form level.

The only option I found is to follow a work-around by tricking Chrome to populate the autofill on a dummy Textbox and password and then hide them from the user view.

Remember the old method with style="display: hidden" or style="visibility: hidden" is also ignored.

FIX:

So create a DIV with height: 0px;overflow:hidden which will still render the HTML elements but hide them from User's view.

Sample Code:

<div style="overflow: hidden; height: 0px;background: transparent;" data-description="dummyPanel for Chrome auto-fill issue">
        <input type="text" style="height:0;background: transparent; color: transparent;border: none;" data-description="dummyUsername"></input>
        <input type="password" style="height:0;background: transparent; color: transparent;border: none;" data-description="dummyPassword"></input>
</div>

Just add the above div within the HTML Form and it should work!

Solution 3:

Use autocomplete="my-field-name" instead of autocomplete="off". Be careful what you call it, since some values are still recognized like autocomplete="country". I also found that using the placeholder attribute helped in some tricky scenarios.

Example: <input type="text" name="field1" autocomplete="my-field-name1" placeholder="Enter your name">

Chrome recently stopped using autocomplete="off" because they thought it was overused by developers who didn't put much thought into whether or not the form should autocomplete. Thus they took out the old method and made us use a new one to ensure we really don't want it to autocomplete.

Solution 4:

$("#selector").attr("autocomplete", "randomString");  

This has worked reliably everytime for me.

Note : I have invoked this LOC on modal show event.

Solution 5:

If anyones reading this and is having difficulty disabling autocomplete on username and password fields for new users, I found setting autocomplete="new-password" works in Chrome 77. It also prevented the username field from auto completing.

Ref: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill