6

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

I've been experiencing serious problems with disabling auto-completion menus in some places of my web front-end application. Especially on the Chrome browser, even after I applied autocomplete="off" to text inputs that are related to user's physical addresses, it still bugged me with a new type of auto-completion menu with "Manage addresses" option in its underneath.

Here's something obvious: Google Chrome automatically assigns this sort of menu to text inputs that have placeholders like "Street" and "Destination ZIP".

Chrome's auto-completion list for Manage Addresses

This thing is a real bummer because there's literally no way to turn it off unless the input element is not even remotely related with "address-y" terms.

The client made it clear that there should be no auto-completion menus attached. But we cannot display address-related inputs without using address-related words.

What would be the solution to this?

Nick Song
  • 1,988
  • 3
  • 29
  • 35
  • 1
    It's even more frustrating when you have added auto suggestion to your address input and chrome shows address suggestion instead of your autosuggestion box. – OMi Shah Dec 16 '19 at 06:37

2 Answers2

11

So here's what I did after hours of research. It works quite well and easy to implement.

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

  • This is the most crucial part: For the input element or any of its adjacent ones where you are required to put any human-readable address terms, insert the "invisible" zero width joiner (‌) between the letters of the said term.

In this way, you 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.

Special thanks to @jblopez who noted out null character can sometimes appear broken on the page.

Nick Song
  • 1,988
  • 3
  • 29
  • 35
  • I just wasted several hours trying to figure this out. Unfortunately your solution doesn't work for the placeholder attribute. I literally had to replace the word city with "name for the urban area" to prevent Google Chrome from trying to autofill – Jamgold Dec 15 '19 at 02:11
  • @Jamgold I'd be very surprised if it doesn't work because it worked like a charm on my end. Can you please elaborate and describe how it didn't work? Did it still display the menu regardless of the change, or did it break your placeholder? – Nick Song Dec 16 '19 at 05:36
  • 1
    I had to do some replacements in placeholder text. The null character was showing as the replacement character in Chrome 79. I had to use the zero width joiner, ‌ to stop autocomplete without adding the replacement character. – jblopez Jan 09 '20 at 17:41
  • @jblopez That is one nice suggestion. Apparently, the null character worked on my end and I guess it has something to do with the different content-type/charset attributes of the index.html we are using. I will reflect your insight in my answer. – Nick Song Jan 10 '20 at 18:12
  • What do I do if the given text is Angular control text? The special characters are escaped and see them "as is" on screen :( – Alexander Oct 15 '21 at 12:53
3

A clean solution is to the autocomplete property on the input fields to anything other than on or off (those are reserved and won't actually turn it off). You can read more about the solution here

camiblanch
  • 3,866
  • 2
  • 19
  • 31