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 input fields AND the form field having the autocomplete="off" attribute, Chrome insists on showing a drop down history of previous entries for the field, which is obliterating the tagbox list.

Answer 1

For a reliable workaround, you can add this code to your layout page:

<div style="display: none;">
 <input type="text" id="PreventChromeAutocomplete" 
  name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Chrome respects autocomplete=off only when there is at least one other input element in the form with any other autocomplete value.

This will not work with password fields--those are handled very differently in Chrome. See https://code.google.com/p/chromium/issues/detail?id=468153 for more details.

UPDATE: Bug closed as "Won't Fix" by Chromium Team March 11, 2016. See last comment in my originally filed bug report, for full explanation. TL;DR: use semantic autocomplete attributes such as autocomplete="new-street-address" to avoid Chrome performing autofill.

Answer 2

I solved in another way. You can try this.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

Answer 3

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 4

Chrome version 34 now ignores the autocomplete=off, see this.

Lots of discussion on whether this is a good thing or a bad thing? Whats your views?

Answer 5

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 6

As of Chrome 42, none of the solutions/hacks in this thread (as of 2015-05-21T12:50:23+00:00) work for disabling autocomplete for an individual field or the entire form.

EDIT: I've found that you actually only need to insert one dummy email field into your form (you can hide it with display: none) before the other fields to prevent autocompleting. I presume that chrome stores some sort of form signature with each autocompleted field and including another email field corrupts this signature and prevents autocompleting.

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

The good news is that since the "form signature" is corrupted by this, none of the fields are autocompleted, so no JS is needed to clear the fake fields before submission.

Old Answer:

The only thing I've found to be still viable is to insert two dummy fields of type email and password before the real fields. You can set them to display: none to hide them away (it isn't smart enough to ignore those fields):

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

Unfortunately, the fields must be within your form (otherwise both sets of inputs are autofilled). So, for the fake fields to be truly ignored you'll need some JS to run on form submit to clear them:

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

---

Notice from above that clearing the value with Javascript works to override the autocomplete. So if loosing the proper behavior with JS disabled is acceptable, you can simplify all of this with a JS autocomplete "polyfill" for Chrome:

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);