How to disable Chrome autofill (after 2020)

Question

I've stumbled across this issue a couple of times in the last while, where Chrome ignores autocomplete="false" and autocomplete="off". It will now even ignore autocomplete="whatever" or anything you do to trick it, if someone has submitted a form with that random "hack" in it before.

In trying to solve this issue, I came across this StackOverflow question, which doesn't solve the problem if you've submitted a form containing this field before.

EDIT: This is NOT for password fields.

Answer 1

It's November 2021, and none of the non-javascript solutions mentioned worked for my address-related field. What did work was actually changing the text in the label.

The Autocomplete dialog in Chrome was shown if:

• The word "Address" is in the label at the start or end; and
• There are at least two other address fields (seemingly anywhere in the page)

EDIT: If you put a zero-width joiner character entity in the middle of the word 'Address' in the label, the autocomplete dialog is suppressed!

i.e. set the label to Addres‍s

html, body {
  font-family: 'Helvetica', Sans-Serif;
  font-weight: 200;
  line-height: 1.5em;
  padding: 1em;
}

<div class="addressDiv">
  <div>
    <label>Focus on this field...Address</label>
    <div>
      <input autocomplete="off" type="text" aria-autocomplete="none" autocapitalize="none" />
    </div>
  </div>
  <div>
    <label>State</label>
    <div>
      <input autocomplete="address-level1" type="text" value="">
    </div>
  </div>
  <div>
    <label>City</label>
    <div>
      <input autocomplete="address-level2" type="text" value="">
    </div>
  </div>
</div>
<p>
See <a href="https://jsfiddle.net/f490h2s6/">this JSFiddle</a>
</p>

Answer 2

I had this issue with a field that has "number" in the name and this triggering the CreditCard Autocomplete Dialog. This solution helped me get rid of it.

Even though this is not the intended use of the option, I think this is unlikely to break and works without JavaScript Hacks. A one time code won't trigger an autocomplete so I treat the fields that are not supposed to autocomplete as one time codes.

<input type="text" name="number" autocomplete="one-time-code" />

This did the trick for me. I tested it in Chrome 87.0.4280.141 and it works fine.

Answer 3

autocomplete="new-password" and set placeholder attribute with some text works for me.

<input name="name1" placeholder="Nº" type="text" autocomplete="new-password" />

Answer 4

Everytime I found a solution Chrome throws a spanner in the works again.

No longer working

• autocomplete="new-*"
• add an offscreen positioned bogus input element style="position: fixed;top:-100px;left:-100px;" as first <form> element
• set <form autocomplete="off">
• use <textarea> and style it as a field

Working solution (15 jul 2021)

Append a dummy <input> without a name attribute and make the original <input> type="hidden"

HTML

<input type="hidden" name="myfield" class="no-autofill"> <input>

Note that any events, (click, blur, focus) that show your custom autofill should be added to the visible <input> element.

Then add a change event to sync the value to the hidden input.

const fields = document.querySelectorAll('input.no-autofill');
for (const field of fields) {
  const dummy = field.nextElementSibling;
  dummy.addEventListener('change',e => {
    field.value = e.target.value;
  });
}

Ow, before implementing. Make sure you visit the Chromium bug tracker and tell the Chrome Developers why following the standard is important. So one day we might be able to just use:

<input name="myfield" autocomplete="off">