Autocomplete off vs false?

Recently I have come across an issue where I wanted to disable auto-complete in all browsers.

Chrome has a new feature in settings where you can add a card number. And the requirement was to also disable that.

What worked in all browsers was to do this autocomplete=false at form level.

But this is not compliant with w3 rules, where they enforce to have autocomplete=off|on.

Can someone please explain to me why false works in all browsers?

even ie8, all firefox, safari etc., but it is not compliant.

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)

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!

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.

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

This has worked reliably everytime for me.

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

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

Auto complete value other that off and false works.

autoComplete="nope" autoComplete="foo" autoComplete="boo" autoComplete="anythingGoesHere"

Tested on chrome 76 and react 16.9.0

It's 2020 and if someone is still struggling with it as I did. The only solution that worked for me is as follows, setting autocomplete to any random string disables the autocomplete but it works only if its done after the page load. If that random string is kept as default value then chrome annoyingly sets it back to off. So what worked for me is (I'm using jquery) on document ready event, I added the following,

window.setTimeout(function () {
        $('your-selector').attr('autocomplete', 'google-stop-doing-this');
}, 1000);

Without the timeout, Chrome still somehow resets its back to off.

if there any "password type input" in your form you can try this;

<input type="password" ..... autocomplete="new-password" />

autocomplete="none" perfectly works for angularjs and angular 7

Try this over input tag:

readonly onfocus="this.removeAttribute('readonly');

Example:

<input type="text" class="form-control" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');">

Setting the autocomplete attribute to true|false or on|off both does not work in all the conditions. Even when you try with to placeholder also it wont work.

I tried to use autocomplete="no" for avoiding the chrome autofill plugin.

This autocomplete="no" should be written inside a input line, for example

Although it might not be the most elegant solution, this worked for me:

JQuery version:

$("input:-internal-autofill-selected").val('');

VanillaJS version:

document.querySelectorAll("input:-internal-autofill-selected").forEach(function(item){item.value = '';})

When Chrome autofills an input field, the fields gets an internal pseudo element -internal-autofill-selected (which also gives the input the light blue background). We can use this pseudo element as selector in order to undo the Chrome autocomplete/autofill.

Please note that you may (depends on your implementation) need to wrap your code in a timeout as Chrome autofills after the DOM is loaded.

Not perfect but working solution using jquery

$(document).ready(function(){
   if (navigator.userAgent.indexOf("Chrome") != -1) {
      $("#selector").attr("autocomplete", "nope"); // to disable auto complete on chrome
   }
})

autocomplete="one-time-code"

worked for me.

Try this one: .

<input type="text" autocomplete="__away">

As an addition to @camiblanch answer

Adding autocomplete="off" is not gonna cut it.
Change input type attribute to type="search".
Google doesn't apply auto-fill to inputs with a type of search.