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

I just updated to Chrome 49 and Diogo Cid's solution doesn't work anymore.

I made a different workaround hiding and removing the fields at run-time after the page is loaded.

Chrome now ignores the original workaround applying the credentials to the first displayed type="password" field and its previous type="text" field, so I have hidden both fields using CSS visibility: hidden;

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

I know that it may seem not very elegant but it works.

Answer 2

i found this solution to be the most appropriate:

function clearChromeAutocomplete()
{
// not possible, let's try: 
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) 
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off'); 
setTimeout(function () {
        document.getElementById('adminForm').setAttribute('autocomplete', 'on'); 
}, 1500);
}
}

It must be loaded after dom ready, or after the form renders.

Answer 3

Modern Approach

Simply make your input readonly, and on focus, remove it. This is a very simple approach and browsers will not populate readonly inputs. Therefore, this method is accepted and will never be overwritten by future browser updates.

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

The next part is optional. Style your input accordingly so that it does not look like a readonly input.

input[readonly] {
     cursor: text;
     background-color: #fff;
}

WORKING EXAMPLE

Answer 4

It appears that Chrome now ignores autocomplete="off" unless it is on the <form autocomplete="off"> tag.

Answer 5

Seen chrome ignore the autocomplete="off", I solve it with a stupid way which is using "fake input" to cheat chrome to fill it up instead of filling the "real" one.

Example:

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chrome will fill up the "fake input", and when submit, server will take the "real input" value.

Answer 6

I am posting this answer to bring an updated solution to this problem. I am currently using Chrome 49 and no given answer work for this one. I am also looking for a solution working with other browsers and previous versions.

Put this code on the beginning of your form

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

Then, for your real password field, use

<input type="password" name="password" autocomplete="new-password">

Comment this answer if this is no longer working or if you get an issue with another browser or version.

Approved on:

• Chrome : 49
• Firefox : 44, 45
• Edge : 25
• Internet Explorer : 11