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

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.

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):

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