CODEWITHSUNDEEP
google-chromeautocompleteautofill
3Dom
3Dom

Reputation: 805

How to disable Chrome autofill (after 2020)

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.

Upvotes: 24

Views: 45901

Answers (17)

Sam S
Sam S

Reputation: 188

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

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

Upvotes: 1

Jack Zhang
Jack Zhang

Reputation: 31

Not work:

auto-complete="off"

autocomplete="new-password"

WORKED

<input type="text" readonly="readonly">

the key is readonly, and when it's ready for input, change the readonly attr value to false, or remove the attr.

Upvotes: 1

nikhil swami
nikhil swami

Reputation: 2684

Dirty answer , edit "selectorForYourInputs" and works just fine, cross browser tested, max overhead 50ms, user never notice any performance lag:

counter = 0;
emptySearchboxInterval = setInterval(() => {
  $(selectorForYourInputs).val("");
  counter++;
  counter == 100 ? clearInterval(emptySearchboxInterval) : null;
}, 20);

Upvotes: 1

dougwig
dougwig

Reputation: 616

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

enter image description here

Upvotes: 0

cobberboy
cobberboy

Reputation: 6195

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&zwj;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>

Upvotes: 3

Willow Hayward
Willow Hayward

Reputation: 43

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.

Upvotes: 0

dehart
dehart

Reputation: 1678

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

Upvotes: 6

Stephan Hoyer
Stephan Hoyer

Reputation: 4928

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.

Upvotes: 1

Alias_Knagg
Alias_Knagg

Reputation: 1034

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.

Upvotes: 0

Mohammad Malek
Mohammad Malek

Reputation: 634

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

Upvotes: 3

Terry Lin
Terry Lin

Reputation: 2599

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/[email protected]/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();

Upvotes: 0

risutoru
risutoru

Reputation: 505

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.

Upvotes: 30

tak3shi
tak3shi

Reputation: 2405

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>

Upvotes: 0

Thales Kenne
Thales Kenne

Reputation: 2922

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.

Upvotes: 0

Pipebugs
Pipebugs

Reputation: 99

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

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

Upvotes: 9

Davor Hrg
Davor Hrg

Reputation: 319

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.

Upvotes: 0

Josh
Josh

Reputation: 63

Try to make your input readonly, enable it after focus

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

Upvotes: -1

Related Questions