How to turn off autocomplete & autofill

Trying to turn off autocomplete or autofill? Here’s a breakdown.

Set off autocomplete

Add the attribute autocomplete="off"

You can either do this on the form:

<form method="post" action="/save" autocomplete="off">
  ...
</form>

or on individual inputs on the form:

<form method="post" action="/save">
  ...
  <label for="address">Address:</label>
  <input type="text" id="address" name="address" autocomplete="off">
</form>

Autocomplete still works, what gives?

In some situations, the browser will still try and be “helpful” and continue to use autocomplete even though you’ve explicitly set it to off. In this case, the best thing to do would be to assign an invalid value instead. autocomplete="no". The browser will have no way to match this & won’t bother to autocomplete the field.

A lot of browsers integrate password management, and because of this, they don’t respect autocomplete="off" for login fields. The recommended way to get around this issue is to use autocomplete="new-password" to allow users to specify new passwords.

Issues with Autofill

There is an entire set of other issues that can come up with autofill. Chrome will not always respect autocomplete="off" for autofill and they state this explicitly:

While Chrome will still respect the [autocomplete] tag for autocomplete data, it will not respect it for autofill data

Chrome will use the name attribute and an input’s label to guess what should be auto-filled. A table of the common attributes and how they are guessed can be found here.

name="address" will enable autofill for saved addresses so modifying the name to something uncommon could be an escape around this issue e.g. name="addy".

The <label> can still be an issue. We don’t want to change copy that is shown to the user so how could we get around this issue? L​​​​et’s​​​​ throw a ​​​​zero-​​​​width whitespace ​​​​character in ​​​​there​​​​! This character can break up the label so the browser doesn’t recognize it but still appear the same to the user.

There’s a zero-width whitespace character in between the carets below you can copy for yourself:

>​<

Address vs A​d​d​r​e​s​s. These two strings look the same but the second has an invisible white space in between each of the characters. You can visualize the difference by copy-pasting the two strings at Diff Checker.

The above solution should only be practical in rare cases, but it's there if you need it.

www.wesleyabbey.com

www.twitter.com/wesleyabbey

wesley@wesleyabbey.com