SOLVED: How to disable or block auto-fill / autocomplete once and for all!

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.
SOLVED: How to disable or block auto-fill / autocomplete once and for all!
SOLVED: How to disable or block auto-fill / autocomplete once and for all!

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 atteibutes 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 compatibilty. 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 followng 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 us a comment!
Thanks

Comments

Get a Quote

Get a Quote