How to disable Chrome autofill (after 2020)

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.

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

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

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">

its work in my local machine try it...

<input type="email" class="form-control" id="email" name="email" placeholder="Enter Email"  readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;">

Read the note at the bottom before using this method

After struggling for a long time, I made it work reliably this way:

It is important that your input type is 'text'!!

define a css class

input.hidden-password {
  -webkit-text-security: disc;
}

Then in your form, set autocomplete off, input types = 'text' and add the class to the input.

<form autocomplete="off">
    <input
      type = "text" // <----This is important
      class = "hidden-password"
    />
</form>

C'mon Google, let us take control over our inputs! My client requires passwords to be changed very often and auto fill IS A BIG NO NO!

IMPORTANT NOTE Do not use this for login or any other place where security is required. I used this for a form within my app where the user was already authenticated and security was not required.

For Me, the problem only occurs, if I have multiple fields with the same value for autocomplete. If I set the value to a random number (Math.random()), no autocomplete is happening. I think it would also be possible to use an otherwise unique string.

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>

here is JS solution that works at this point in time for me:

<input name="name" type="text"
        onfocus="this.__name = this.getAttribute('name'); this.removeAttribute('name')"
        onblur="this.setAttribute('name',this.__name)"
        >

The above js code stores input name to this.__name and removes the name onfocus later onblur name is restored so forms can work as expected, but chrome does not autofill.

Try to make your input readonly, enable it after focus

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" type="text" value="test">

No known attribute value is working in form tag. I have tried them all: do-not-show-ac, chrome-off, new-password, off...

The only way i found is by adding autocomplete='new-password' to every input component. To do it globaly, i am using this jquery:

    <script>
        $('input').attr('autocomplete', 'new-password');
    </script>

The best way is to use JavaScript to skip browser's behavior, disableautofill.js does this.

You can try https://github.com/terrylinooo/disableautofill.js

<script src="https://cdn.jsdelivr.net/npm/disableautofill@2.0.0/dist/disableautofill.min.js"></script>

Usage:

 var daf = new disableautofill({
    'form': '#testForm', // Form id
    'fields': [
        '.test-pass',  // password
        '.test-pass2'  // confirm password
    ],
    'debug': true,
    'callback': function() {
        return checkForm(); // Form validator
    }
});

daf.init();

How about just never submit the form? Nothing to remember!
Your app probably doesn't work without javascript anyway, right?

In fact, don't use a form at all, just collect the input values, serialize and do an ajax call.

$('#mybutton').on('click', function (e) {
    $.ajax({
        type: "POST",
        url: 'mybackend',
        data: $('#formdiv input').serialize(),
        success: function (data) ...

Mind you, this is not a well tested idea, just something I have observed when I wanted autofill, and which I have not seen suggested in any of the many threads dealing with this issue.

I just resolved a related issue - it was forcing Chrome Autofill on an address field (Google Places Autocomplete, specifically) and no other solutions were working.

Eventually, we changed the nearest label to it from saying "Business Address" to being blank and set its text via CSS

#gmapsSearchLabel:after {
    content: "Business Address";
}

And without a nearby label "saying" address, it stopped forcing Autofill.

To prevent 'manage addresses' level of of chrome popup: autocomplete='chrome-off'

To prevent autosuggest popup, if you can swing it: EXCLUDE name and id attributes.

A solution that works for me is to place a zero-width-white-space character into the placeholder text, so for example:

placeholder="Enter your address" becomes

placeholder="Enter your a[ZWSP]ddress"

Chrome is then unable to find "address" and skips autocomplete suggestions.

You can copy the character ( don't use the html entity etc. ) over at CSS Tricks. Here is the word "address" with the ZWSP character after the letter "a":

a​ddress