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".
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?
On the “Settings” screen, in the “You and Google” section on the right, click “Sync and Google Services.” You're now on the “Google Services” page. Here, scroll down to the “Other Google Services” section, then turn off the “Autocomplete Searches and URLs” option. And you're all set.
At the top right, tap your Profile picture or initial. Settings. General. Turn off Autocomplete with trending searches.
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‌treet" autocomplete="off">
<form action="/action_page.php">
<label for="product-addres">Product A‌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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With