CODEWITHSUNDEEP
javascripthtmlgoogle-chromeautocompletestreet-address
Christopher Ransom
Christopher Ransom

Reputation: 2058

Google Chrome: Disable auto-completion menu for Manage Addresses

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?

Upvotes: 7

Views: 4073

Answers (2)

Christopher Ransom
Christopher Ransom

Reputation: 2058

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.

Upvotes: 13

camiblanch
camiblanch

Reputation: 4072

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

Upvotes: 4

Related Questions