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 a pain in the back.
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 makes the trick. So if you have been looking for this answer all over the internet and finally, leave me a comment below and tell me if it worked.

First of all, because browser compatibility is changing and eventually things will work properly, we need to add the most common attributes

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

 

This is supposed to be enough, BUT IT IS NOT! and we all know. so the next thing to do is 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, ignore it, there is another trick that involves adding a dummy password field, but I don't like adding dummy content, so I will skip it.
But this is the final step that makes everything work, the browser will never attempt to autocomplete a readonly input, so we need to make it readonly and on focus bring it back to normal, and bingo, this works like a charm.

 

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

 

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 so far it works 100% of the time. probably with readonly onfocus="this.removeAttribute('readonly'); is enough, but as I said, browser compatibility is changing and eventually things will work properly, so it is good to have it there.

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

Comments