Disable the browser autofill on input fields (All browsers)
Asked Answered
G

3

10

I have a simple html form, i am using "google autofill" on a field that autofill data on two fields.

The issue is that the browser address autofill is overlapping the google autofill.

How to disable the browser autofill on fields on every browser ?

Feel free to share thoughts on this. Thankyou.

Gera answered 13/11, 2020 at 5:2 Comment(0)
J
12

Here's the universal solution that will work in all browsers as of May 2021!

TL;DR

Rename your input field names and field ids to something non-related like 'data_input_field_1'. Then add the ‌ character into the middle of your labels. This is a non-printing character, so you won't see it, but it tricks the browser into not recognizing the field as one needing auto-completing, thus no built-in auto-complete widget is shown!

The Details

Almost all browsers use a combination of the field's name, id, placeholder, and label to determine if the field belongs to a group of address fields that could benefit from auto-completion. So if you have a field like <input type="text" id="address" name="street_address"> pretty much all browsers will interpret the field as being an address field. As such the browser will display its built-in auto-completion widget. The dream would be that using the attribute autocomplete="off" would work, unfortunately, most browsers nowadays don't obey the request.

So we need to use some trickery to get the browsers to not display the built-in autocomplete widget. The way we will do that is by fooling the browser into believing that the field is not an address field at all.

Start by renaming the id and the name attributes to something that won't give away that you're dealing with address-related data. So rather than using <input type="text" id="city-input" name="city">, use something like this instead <input type="text" id="input-field-3" name="data_input_field_3">. The browser doesn't know what data_input_field_3 represents. But you do.

If possible, don't use placeholder text as most browsers will also take that into account. If you have to use placeholder text, then you'll have to get creative and make sure you're not using any words relating to the address parameter itself (like City). Using something like Enter location can do the trick.

The final parameter is the label attached to the field. However, if you're like me, you probably want to keep the label intact and display recognizable fields to your users like "Address", "City", "State", "Country". Well, great news: YOU CAN! The best way to achieve that is to insert a Zero-Width Non-Joiner Character &#8204; as the second character in the label. So replacing <label>City</label> with <label>C&#8204;ity</label>. This is a non-printing character, so your users will see City, but the browser will be tricked into seeing C ity and not recognize the field!

Mission accomplished! If all went well, the browser should not display the built-in address auto-completion widget on those fields anymore!

Hope this helps you in your endeavors!

Jointed answered 19/5, 2021 at 23:56 Comment(2)
Thanks Rocket Fuel ! I tried a lots of solution and nothing worked. This simple solution did the trick and I checked on Chrome, Edge and Firefox it's working as of Jan 27, 2023. Best part the characters &#8204; are non-printing so when rendered the labels look exactly what you wantSandarac
Small update: I found (at least Edge/WIndows11) was not fooled by e&#8204;mail as the label - I guess it recognised 'mail' - so I put a second &#8204; after the m for example e.g. e&#8204;m&#8204;ailLacefield
D
2

This is not so easy to implement cross-browser.

Many browsers, in particular Google Chrome has pushed very hard on having a tool that helps users auto-fill their forms, but for developers this has been just been painful.

I could list tons of different ways that could or could not work depending on different factors, but I will post this one solution that finally does the trick. So if you have been looking for this answer all over the internet, leave me a comment below and tell me if it worked.

First of all, due to browser compatibility, we need to add these attributes as eventually things will work properly:

autocorrect="off" spellcheck="false" autocomplete="off"

This is supposed to be enough, BUT IT IS NOT! and we all know that. so the next thing to do is to add a little bit of JS in case the browser managed to ignore these attributes. For this example I will just use jQuery and assume that we are dealing here with inputs, but you can chose any selector you want.

$('form').attr('autocomplete', 'off');
$('input').attr('autocomplete', 'off');

Finally, this will work 50% of the times, but if the browser has previously detected that this form was filled up in the past it might judt ignore it, so let's add a final step.

There is another popular trick that involves adding a dummy password field, but I don't like adding dummy content, and I don't find this solution elegant so I will just skip it, besides it doesn't work.

To be honest this final step is the one that makes everything work, but as I said it is better if our attributes are ready for future compatibility. Keep in mind that the browser will never attempt to autocomplete a readonly input, so for this last step we need to make it readonly and on focus bring it back to normal, so add the following JS in the onfocus attribute:

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

BINGO! it should work now.

So the final input looks like this:

<input type="text" name="email" required autocorrect="off" spellcheck="false" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" />
<script>
$('input').attr('autocomplete', 'off');
</script>

It seems like a lot, but this works 100% of the times. as I said probably with readonly onfocus="this.removeAttribute('readonly'); is enough, but browser compatibility is changing and eventually things will work properly, so it is good to have it there.

If this worked (or did not work) leave a comment! Thanks

Dramamine answered 13/11, 2020 at 5:12 Comment(4)
Great explanation, let me test this on my application. & let you know.Gera
May i ask why "autocorrect="off" spellcheck="false" ?Gera
Autocorrect leads to automation from the keyboard input element. Some browsers use the term autocorrection, and some others use the term spellcheck, so this way you start eliminating the most browsers diversity 😊Dramamine
Browser s*ck :-(Banff
C
0

As July 2024, I've found that autocomplete=off and other tricks don't work any more. I don't like javascript solution, so I use the following:

I put an &nbsp; at the begin of the field value. At server side I convert the entity to a blank space and then I remove it with a trim.

For example, for a php server:

<input type="text" name="email" value="&nbsp;<?=$email?>" />

And at server side:

$email = trim(html_entity_decode($_POST['email']));
Carpic answered 22/7, 2024 at 16:7 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.