Disable autocomplete on Chrome / Firefox / Safari

How frustrating that the browsers forcing their internal autocomplete solution aggressively… We sometimes would need to use our unique autocomplete solutions, for example, to get an element’s id based on its name.

After hours of searching, digging, trying I came up with a viable hack to get rid of the autocomplete function.

UPDATE 2021:

It seems the trick below doesn’t really work anymore. Sometimes works sometimes doesn’t. This Chome autofill forcing is getting more and more frustrating for everybody.

A new hack that works for me now:

1. Set a custom value for autocomplete attribute
2. Set readonly attribute true default
3. Set an onFocus and an onBlur listeners, when onFocus event occurs, set the readonly attribute false, when onBlur event occurs set the readonly attribute true
4. If you have multiple inputs that you would like to disable Chrome autofill function, set different values for autocomplete attribute for each input

<input type=”text” autocomplete=”off123” readonly>

Before 2021:

The magic with the autocomplete grouping function is it would help the developers to tell the browsers how to split data into separated fields. For example, if you would like to autocomplete an address but you would like to split the address to ZIP code, Country, Town, Address, you can tell the browser what part belongs to which fields of the form.

We can use this to switch the autocomplete function off:

<input type="text" name="your_input" autocomplete="prevent-autocomplete">
<!-- Add a fake hidden input with the same autocomplete group and random naming -->
<input type="text" name="{{str_random(5)}}" hidden autocomplete="prevent-autocomplete">

Just add a hidden input with the same autocomplete value, since it has a random name the browsers can’t remember its older values ;)

Official documentation and more info:

The HTML autocomplete attribute