Chrome ignores autocomplete=“off”

Question

I\'ve created a web application which uses a tagbox drop down. This works great in all browsers except Chrome browser (Version 21.0.1180.89).

Despite both the

Answer 1

The solution at present is to use type="search". Google doesn't apply autofill to inputs with a type of search.

See: https://twitter.com/Paul_Kinlan/status/596613148985171968

Update 04/04/2016: Looks like this is fixed! See http://codereview.chromium.org/1473733008

Answer 2

In Chrome 48+ use this solution:

1. Put fake fields before real fields:

   <form autocomplete="off">
     <input name="fake_email"    class="visually-hidden" type="text">
     <input name="fake_password" class="visually-hidden" type="password">
   
     <input autocomplete="off" name="email"    type="text">
     <input autocomplete="off" name="password" type="password">
   </form>
   

2. Hide fake fields:

   .visually-hidden {
     margin: -1px;
     padding: 0;
     width: 1px;
     height: 1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     clip: rect(0, 0, 0, 0);
     position: absolute;
   }
   

3. You did it!

Also this will work for older versions.

Answer 3

Up until just this last week, the two solutions below appeared to work for Chrome, IE and Firefox. But with the release of Chrome version 48 (and still in 49), they no longer work:

1. The following at the top of the form:

<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

2. The following in the password input element:

   autocomplete="off"

So to quickly fix this, at first I tried to use a major hack of initially setting the password input element to disabled and then used a setTimeout in the document ready function to enable it again.

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

But this seemed so crazy and I did some more searching and found @tibalts answer in Disabling Chrome Autofill. His answer is to use autocomplete="new-password" in the passwords input and this appears to work on all browsers (I have kept my fix number 1 above at this stage).

Here is the link in the Google Chrome developer discussion: https://code.google.com/p/chromium/issues/detail?id=370363#c7

Answer 4

autocomplete=off is largely ignored in modern browsers - primarily due to password managers etc.

You can try adding this autocomplete="new-password" it's not fully supported by all browsers, but it works on some

Answer 5

Browser does not care about autocomplete=off auto or even fills credentials to wrong text field?

I fixed it by setting the password field to read-only and activate it, when user clicks into it or uses tab-key to this field.

fix browser autofill in: readonly and set writeble on focus (at mouse click and tabbing through fields)

 <input type="password" readonly  
     onfocus="$(this).removeAttr('readonly');"/>

Update: Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

By the way, more information on my observation:

Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it, sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.

Answer 6

No clue why this worked in my case, but on chrome I used autocomplete="none" and Chrome stopped suggesting addresses for my text field.