2019, Chrome 76, approach to autocomplete off

Question

There are are few posts out there about this. You spend hours going through each answer, testing, reading comments, to find that there is no solution. What have you done in

Answer 1

Update, January 2020: It appears that as of Chrome 79, Autocomplete (as defined here) no longer treats autocomplete="some-unrecognised-value" as equal to autocomplete="on", so autocomplete="nope" or similar is now effective at disabling both Autocomplete and Autofill.

Update, April 2020: They changed it again. As of Chrome 81, autocomplete="some-unrecognised-value" is no longer effective at disabling the Autocomplete mechanism. However, Autofill now seems to be a lot more conservative than it was before - it still doesn't follow the spec (a field with name="email" and autocomplete="off" will still receive Autofill suggestions) but it doesn't offer up spurious address fragments on random form fields. My recommendation right now would therefore be to use autocomplete="off". If you want to do that on a field named email, you're probably out of luck though :-(

---

TL,DR: There appears to be no setting for the autocomplete attribute that will reliably turn off all autocomplete dropdowns. However, the circumstances that have led to this are quite convoluted and worth documenting, to hopefully clear up the masses of conflicting advice...

There are two distinct mechanisms present in current (76.0.3809.132) versions of Chrome, which we'll refer to as Autofill and Autocomplete (not necessarily their official names):

Autofill

The Autofill feature attempts to fill in forms using the address information stored in your browser settings. It can be identified by the "Manage addresses..." option (or similar) at the bottom of the dropdown. This feature does not honour autocomplete="off" or autocomplete="false", as a deliberate decision on the part of the Chrome developers.

In a statement outlining this decision, zkoch offered this workaround:

In cases where you really want to disable autofill, our suggestion at this point is to utilize the autocomplete attribute to give valid, semantic meaning to your fields. If we encounter an autocomplete attribute that we don't recognize, we won't try and fill it.

As an example, if you have an address input field in your CRM tool that you don't want Chrome to Autofill, you can give it semantic meaning that makes sense relative to what you're asking for: e.g. autocomplete="new-user-street-address". If Chrome encounters that, it won't try and autofill the field.

This is the basis of attempted solutions such as autocomplete="nope"; the Autofill mechanism will skip any fields with autocomplete attribute values it doesn't recognise.

The code that implements this decision, for the record: https://chromium.googlesource.com/chromium/src/+/refs/tags/78.0.3903.1/components/autofill/core/browser/form_structure.cc#1218

Autocomplete

The Autocomplete feature provides a dropdown of previously-submitted values from this form field. This dropdown does not have a "Manage addresses..." option. Autocomplete does honour the autocomplete="off" or autocomplete="false" attribute; any other value (including 'invalid' ones such as autocomplete="nope") will leave it enabled.

Conclusion

Autocompletion dropdowns cannot be turned off through the autocomplete dropdown; any value that disables Autofill will leave Autocomplete enabled, and vice versa. Anyone who thinks they've found a working solution (either through autocomplete or some other method such as CSS hacks) should check that it works against both mechanisms.

Unfortunately it's probably going to be an uphill struggle to convince Chrome's developers that this is broken. The developers of Autofill apparently believe that they made a calculated decision to break autocomplete="off" while offering web developers an alternative; that alternative is broken, for more subtle reasons than they realise. From their perspective, the resulting howls of protest are coming from disgruntled developers too lazy to jump through one little hoop and update their autocomplete="off" attributes. In all the noise, the message isn't getting through: the hoop is broken.

Answer 2

try this, I used this little trick and it worked until now (September 2020). i hope this works for a lot of people

--HTML--
<input type="text" name="example" autocomplete="off">
    
--Javascript--
let elements = document.querySelectorAll('[autocomplete="off"]');
elements.forEach(element => {
    element.setAttribute("readonly", "readonly");
    element.style.backgroundColor = "inherit";
    setTimeout(() => {
        element.removeAttribute("readonly");
    }, 500);
})

Answer 3

Chrome version 81.

For me, when input type is TEL, EMAIL or SEARCH, it WORKS with autocomplete='disabled'. When input type is NUMBER, it WORKS with autocomplete='off'.

But when input type is TEXT .. it may works with autocomplete='off'. If not, it will do with autocomplete='disabled'.

You can try this, perhaps it will work for you (it works in 95% of cases for me) :

// Désactivation de l'autocomplete des input text
function setAutocomplete(val) {
    var E = document.getElementsByTagName('INPUT');
    for (var i = 0 ; i < E.length ; i++) {
        if (E[i].name == 'txt_nom') { console.log('txt_nom', E[i]); }
        var type = E[i].type.toUpperCase();
        if (E[i].autocomplete != '') { continue; }
        if (type == 'HIDDEN') {
            //
        } else if (type == 'NUMBER') {
            E[i].autocomplete = 'off';
        } else if ((type == 'TEL') || (type == 'EMAIL') || (type == 'SEARCH')) {
            E[i].autocomplete = 'disabled';
        } else {
            E[i].autocomplete = val;
        }
    }
}

// Exécution de diverses fonctions à la fin de chaque chargement
window.addEventListener("load", function() {
    // Désactivation de l'autocomplete des input text
    setAutocomplete('off');
});