Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

2019, Chrome 76, approach to autocomplete off

There are are few posts out there about this. You spend hours going through each answer, testing, reading comments, to find that there is no solution. What have you done in 2019, Chrome 76, that works?

like image 839
user2060451 Avatar asked Aug 06 '19 01:08

user2060451


People also ask

Does Chrome ignore autocomplete off?

Chrome intentionally ignores autocomplete=“off” and autocomplete=“false”. However, they put new-password in as a special clause to stop new password forms from being auto-filled.

How do I turn on autocomplete in Chrome?

Click Search features from the menu on the left and then click the Autocomplete tab. Click on the slider to set Enable autocomplete to On.


4 Answers

Update, January 2020: It appears that as of Chrome 79, Autocomplete (as defined here) no longer treats autocomplete="some-unrecognised-value" as equal to autocomplete="on", so autocomplete="nope" or similar is now effective at disabling both Autocomplete and Autofill.

Update, April 2020: They changed it again. As of Chrome 81, autocomplete="some-unrecognised-value" is no longer effective at disabling the Autocomplete mechanism. However, Autofill now seems to be a lot more conservative than it was before - it still doesn't follow the spec (a field with name="email" and autocomplete="off" will still receive Autofill suggestions) but it doesn't offer up spurious address fragments on random form fields. My recommendation right now would therefore be to use autocomplete="off". If you want to do that on a field named email, you're probably out of luck though :-(


TL,DR: There appears to be no setting for the autocomplete attribute that will reliably turn off all autocomplete dropdowns. However, the circumstances that have led to this are quite convoluted and worth documenting, to hopefully clear up the masses of conflicting advice...

There are two distinct mechanisms present in current (76.0.3809.132) versions of Chrome, which we'll refer to as Autofill and Autocomplete (not necessarily their official names):

Autofill

Autofill example: a dropdown showing two postcodes and a "Manage addresses..." option

The Autofill feature attempts to fill in forms using the address information stored in your browser settings. It can be identified by the "Manage addresses..." option (or similar) at the bottom of the dropdown. This feature does not honour autocomplete="off" or autocomplete="false", as a deliberate decision on the part of the Chrome developers.

In a statement outlining this decision, zkoch offered this workaround:

In cases where you really want to disable autofill, our suggestion at this point is to utilize the autocomplete attribute to give valid, semantic meaning to your fields. If we encounter an autocomplete attribute that we don't recognize, we won't try and fill it.

As an example, if you have an address input field in your CRM tool that you don't want Chrome to Autofill, you can give it semantic meaning that makes sense relative to what you're asking for: e.g. autocomplete="new-user-street-address". If Chrome encounters that, it won't try and autofill the field.

This is the basis of attempted solutions such as autocomplete="nope"; the Autofill mechanism will skip any fields with autocomplete attribute values it doesn't recognise.

The code that implements this decision, for the record: https://chromium.googlesource.com/chromium/src/+/refs/tags/78.0.3903.1/components/autofill/core/browser/form_structure.cc#1218

Autocomplete

Autocomplete example: a dropdown showing a previously submitted form value

The Autocomplete feature provides a dropdown of previously-submitted values from this form field. This dropdown does not have a "Manage addresses..." option. Autocomplete does honour the autocomplete="off" or autocomplete="false" attribute; any other value (including 'invalid' ones such as autocomplete="nope") will leave it enabled.

Conclusion

Autocompletion dropdowns cannot be turned off through the autocomplete dropdown; any value that disables Autofill will leave Autocomplete enabled, and vice versa. Anyone who thinks they've found a working solution (either through autocomplete or some other method such as CSS hacks) should check that it works against both mechanisms.

Unfortunately it's probably going to be an uphill struggle to convince Chrome's developers that this is broken. The developers of Autofill apparently believe that they made a calculated decision to break autocomplete="off" while offering web developers an alternative; that alternative is broken, for more subtle reasons than they realise. From their perspective, the resulting howls of protest are coming from disgruntled developers too lazy to jump through one little hoop and update their autocomplete="off" attributes. In all the noise, the message isn't getting through: the hoop is broken.

like image 181
gasman Avatar answered Oct 17 '22 20:10

gasman


Try using type="search" instead of "text" for your input field, I've done this several time and it works for me.

like image 43
Husein Yuseinov Avatar answered Oct 17 '22 20:10

Husein Yuseinov


As of Dec 6, 2019, with Chrome v78.x

Standard methods like autocomplete="off" are now working almost fine for the latest versions of Chrome. Except for this one:

Chrome's auto-completion list for Manage Addresses

This thing is a real bummer because it doesn't only disrespect the standard/non-standard values like "nope" but there's literally no way to turn this off unless the input is not even remotely related with "addressy" terms.

How on earth we could possibly display address-related input fields without using address-related words? Here comes the easiest solution ever.

  • Make sure the input element's name and id don't include any address-related terms. Attributes like id="input-street" or name="destination-zip" are big no-no.

  • This is the most crucial part: If you are required to use any human-readable address terms for the text input or any of its adjacent elements, insert the "invisible" zero width joiner (‌) between the letters of the said term. In this way, we can fool the AI capability of Chrome and bypass its strict autocompletion behavior.

Some working examples:

<input id="input-stret" placeholder="S&zwnj;treet" autocomplete="off">

<form action="/action_page.php">
  <label for="product-addres">Product A&zwnj;ddress</label>
  <input name="addres" id="product-addres" autocomplete="off">
</form>

And there you go. No more pesky menus for managing addresses, nor any regular autocompletion menus.

like image 8
Nick Song Avatar answered Oct 17 '22 21:10

Nick Song


As gasman's answer explains, both the autofill and autocomplete features must be disabled, which doesn't seem possible on a single input.
The only working solution I've found is to setting autocomplete="off" on the input and add hidden fake inputs before the real input that fool autofill, like so:

<input name="Fake_Username" id="Fake_Username" type="text" style="display:none">
<input name="Fake_Password" id="Fake_Password" type="password" style="display:none">
<input name="NameInput" id="NameInput" type="text" autocomplete="off">
like image 3
Lucas Avatar answered Oct 17 '22 21:10

Lucas