Autocomplete off vs false?

Question

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.

I was able to find the solution from another post: https://stackoverflow.com/a/38961567/2038779 — Gir32, May 21 '18 at 06:23
Possible duplicate of [Disabling Chrome Autofill](https://stackoverflow.com/questions/15738259/disabling-chrome-autofill) — Gajus, May 29 '19 at 17:17
Possible duplicate of [Autocomplete Off is completely Ignored](https://stackoverflow.com/questions/29432665/autocomplete-off-is-completely-ignored) and [Autocomplete populating wrong field](https://stackoverflow.com/questions/34443628/autofill-populating-wrong-fields) — Michael Schober, Feb 12 '21 at 08:01

camiblanch · Accepted Answer · 2016-06-15T19:29:36.423

34

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)

edited Jun 15 '16 at 19:29

answered May 06 '15 at 15:59

camiblanch

3,226
2
18
29

1

@pauel I'm having a hard time replicating behavior where this solution doesn't work. Could you post an example where this isn't working? – camiblanch Sep 14 '15 at 15:46
I am finding that "false" does not work, but "off" does. I'm using Chrome 46.0.2490.71 – see sharper Oct 21 '15 at 06:03
@seesharper I can confirm the behavior you are talking about. Must have been fixed in more recent versions of chrome I guess. Interesting – camiblanch Oct 21 '15 at 17:25
False still works, not "off". Version 47.0.2526.106 m – Olivier Pons Dec 18 '15 at 12:41
@OlivierPons interesting. I see this behavior as well. I will update my answer once again – camiblanch Dec 28 '15 at 20:20
For all newcomers: I can confirm that autocomplete="off" on "form" in Chrome now works correctly (v56). – Sellorio Feb 08 '17 at 22:22
No autocomplete attribute values seems to work for Chrome 62. Chrome 62 insists on auto-completing inputs no despite what I set the autocomplete attribute to. – Crystal Miller Jun 12 '18 at 16:36
6

No value for the autocomplete attribute appears to work for Chrome 62. Chrome 62 insists on auto-completing an input despite the autocomplete value. – Crystal Miller Jun 12 '18 at 17:12
1

To disable it for all input tags, i used: jQuery("input").attr("autocomplete", Math.random()); – Azghanvi Dec 09 '20 at 17:19

Adheep Mohamed Abdul Kader · Answer 2 · 2020-05-17T09:24:31.830

17

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!

edited May 17 '20 at 09:24

answered Mar 07 '19 at 13:53

Adheep Mohamed Abdul Kader

1,515
1
14
27

77

Why do the Chrome engineers seem to think they know better than the people actually building the sites on the web and keep finding ways to re-enable autocomplete? The arrogance is stunning. – MgSam May 09 '19 at 15:06
@JAC not always. Just tested a form in Chrome 74, then updated to Chrome 75, and the autofill does appear for me in them both, whatever is in the autofill attribute. Under some conditions, including personalized, Chrome offers to autofill, completely covering my cool datepicker calendar in the process. Haven't got a test case. – Matvey Andreyev Jun 13 '19 at 12:35
16

Chrome is becoming almost as annoying as IE. – Gavin Nov 05 '19 at 10:04
https://www.codementor.io/@leonardofaria/disabling-autofill-in-chrome-zec47xcui – Joy Acharya Dec 13 '19 at 22:07
1

The Sample Code has a typo: the outer
needs "overflow: hidden" -- "overflow: none" is not a thing.
– tylerl May 15 '20 at 22:49
what a hack sir ji – Pulkit Pahwa Sep 25 '20 at 14:04

score 14 · Answer 3 · edited Feb 08 '19 at 10:52

14

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.

edited Feb 08 '19 at 10:52

Arun J

691
4
13
24

answered Jun 23 '16 at 12:52

blairzotron

219
2
6

Do you have any links to any citations/articles/discussions about this? – Jacob Sep 12 '16 at 20:29
8

Never mind, found it: https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164 – Jacob Sep 12 '16 at 20:30

score 7 · Answer 4 · answered Nov 11 '16 at 07:31

7

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

This has worked reliably everytime for me.

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

answered Nov 11 '16 at 07:31

Kishor Pawar

2,984
3
21
46

are you generating a random string for ever form view? – DCdaz May 02 '19 at 10:57
@Raghav can you please create jsfiddle and tell us what version are you working on? – Kishor Pawar Aug 15 '19 at 06:16
@Raghav You seem to be right. Here is jsfiddle. https://jsfiddle.net/doeL0t1g/14/ – Kishor Pawar Aug 15 '19 at 12:53
https://www.codementor.io/@leonardofaria/disabling-autofill-in-chrome-zec47xcui – Joy Acharya Dec 13 '19 at 22:07
1

This one worked for me even without jQuery, simply adding the attribute in the html text input field. – Drk_alien Aug 16 '20 at 15:22

score 6 · Answer 5 · answered Oct 22 '19 at 10:47

6

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

answered Oct 22 '19 at 10:47

wintel-warrior

101
2
6

Agree autocomplete="new-password" is by far the simplest workaround to this Chrome issue – Laszlo Sarvold Jul 13 '20 at 09:04

score 5 · Answer 6 · answered Aug 15 '19 at 13:58

5

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

answered Aug 15 '19 at 13:58

Rajendran Nadar

2,413
2
21
34

1

https://www.codementor.io/@leonardofaria/disabling-autofill-in-chrome-zec47xcui – Joy Acharya Dec 13 '19 at 22:06
2

@JoyAcharya This solved my problem with Chrome's autofill feature. This should be the recommended solution. – Daniel Harris Mar 05 '20 at 16:05

score 2 · Answer 7 · answered Oct 08 '20 at 12:51

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.

score 0 · Answer 8 · answered Jun 06 '19 at 11:09

0

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

answered Jun 06 '19 at 11:09

Rohit Parte

1,568
18
13

Not anymore. Chrome 75 – americanslon Aug 08 '19 at 15:37
1

try autocomplete="chrome-off" it worked for me in chrome v84 – Eduard Void Aug 03 '20 at 13:17
@EduardVoid Tried it with chrome 84, it did not work – MaNn Aug 11 '20 at 11:44

score 0 · Answer 9 · answered Jun 08 '20 at 12:21

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

neoMagic · Answer 10 · 2020-08-24T08:53:34.277

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.

score 0 · Answer 11 · answered Oct 20 '20 at 14:43

0

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

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

answered Oct 20 '20 at 14:43

Önay Yalciner

21
6

score 0 · Answer 12 · edited Dec 16 '20 at 11:33

0

Try this over input tag:

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

Example:

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

edited Dec 16 '20 at 11:33

hgb123

9,840
3
11
31

answered Dec 16 '20 at 10:10

Amit Lahoti

1

score 0 · Answer 13 · answered Feb 03 '21 at 20:06

0

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

answered Feb 03 '21 at 20:06

Mujtaba Haroon

83
7

score -4 · Answer 14 · edited May 23 '17 at 12:03

-4

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.

edited May 23 '17 at 12:03

Community

1
1

answered Oct 28 '15 at 16:44

Matas Vaitkevicius

49,230
25
212
228

8

You should not use search for not search. – Ben Affleck Nov 01 '15 at 10:34
3

You cannot use search fields as a substitution for text fields. They even look different on Safari. They look like search fields with rounded corners and reset button. – Ben Affleck Nov 01 '15 at 14:53
You only make your life harder because maybe tomorrow search field will look like a dragon because of new OS update. I use `$(':input', this.$formElement).attr('autocomplete', 'off');` for critical forms. Works in Chrome. – Ben Affleck Nov 01 '15 at 14:58
@Andy have you tried `$(':input', this.$formElement).attr('autocomplete', 'off');` ? – Matas Vaitkevicius Nov 01 '15 at 14:59
Yep. Works for me on Chrome on OSX Version 46.0.2490.80 (64-bit). Tried with it off and on. Can see autocomplete completely gone when I set `autocomplete` prop directly on input fields. This didn't work on FORM element though, that's why I had to apply it to all fields. – Ben Affleck Nov 01 '15 at 15:01
@Andy I am very pleased that it does for you, this answer is for those to whom it doesn't. – Matas Vaitkevicius Nov 01 '15 at 20:42
Very weak. You are in denial. – Ben Affleck Nov 02 '15 at 08:52
@Andy Ofc I am, https://code.google.com/p/chromium/issues/detail?id=468153 so is everyone else (but you). http://stackoverflow.com/questions/12374442/chrome-browser-ignoring-autocomplete-off – Matas Vaitkevicius Nov 02 '15 at 09:04
Stop playing dumb, did you try using the solution that I gave you? – Ben Affleck Nov 02 '15 at 09:06
@Andy Do you really need confirmation that it does not work? Fine, your solution does not work (for everyone, but you ofc). – Matas Vaitkevicius Nov 02 '15 at 09:12
I tested it yesterday and it works. I don't understand the reference to everyone. Stay down voted bro, cheer up there – Ben Affleck Nov 02 '15 at 09:16
1

Neither Jquery's attr autocomplete off or autocomplete=off is working for me in chrome (Version 46.0.2490.80 m (64-bit)). False is working but seems to be overridden by visual studio... This works for me. – SILENT Nov 10 '15 at 01:53
1

@highmaintenance Confirmed in an upcoming Chrome update, search inputs will be dragons. – Wesley Murch Jul 31 '18 at 20:55
@wesley-murch do you have a link? I will grab some popcorn – Ben Affleck Aug 01 '18 at 22:03

Autocomplete off vs false?

14 Answers14

Linked

Related