Reputation: 971

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.

Upvotes: 81

Answers (18)

ko100

Reputation: 120

For anyone reading in 2024, the accepted answer isn't true anymore. According to the MDN Web Docs, the autocomplete attribute of the input element doesn't accept boolean values. Instead, it's value should be a string representing how the autocomplete is being used.

The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, and password. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types.

Using the hidden value will render the expected behavior:

<input autocomplete="hidden" />

Upvotes: 0

Omair Munir

Reputation: 143

If you are still looking for an answer in 2023, try this one as it worked for me. I added a hidden input with autocomplete=false

<input autocomplete="false" name="hidden" type="text" style="display:none;">

Upvotes: 0

Jawad Altaf

Reputation: 105

Try this one: .

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

Upvotes: 3

Gov

Reputation: 33

autocomplete="one-time-code"

worked for me.

Upvotes: 0

Mujtaba Haroon

Reputation: 99

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

Upvotes: 0

Amit Lahoti

Reputation: 11

Try this over input tag:

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

Example:

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

Upvotes: 1

Önay Yalciner

Reputation: 61

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

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

Upvotes: 3

blisssan

Reputation: 698

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.

Upvotes: 3

neoMagic

Reputation: 420

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.

Upvotes: 0

lohit Budugutta

Reputation: 1

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

Upvotes: 0

Adheep

Reputation: 1585

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!

Upvotes: 22

wintel-warrior

Reputation: 131

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

Upvotes: 7

Rajendran Nadar

Reputation: 5438

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

Upvotes: 6

Rohit Parte

Reputation: 4076

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

Upvotes: 2

blairzotron

Reputation: 289

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.

Upvotes: 17

Kishor Pawar

Reputation: 3526

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

This has worked reliably everytime for me.

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

Upvotes: 7

camiblanch

Reputation: 4072

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)

Upvotes: 42

Matas Vaitkevicius

Reputation: 61509

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.

Upvotes: -5

Autocomplete off vs false?

Answers (18)

Related Questions