"AutoComplete=Off" not working on Google Chrome Browser

Question

I know there is one similar question on Stackoverflow, but none of the solution there worked for me.

<form autocomplete="off" id="search_form" method="post" action="">
    <input autocomplete="off" type="text" />
</form>

As you can see, I put autocomplete=off on BOTH the form and the input field, but Google Chrome still displays this autocompletion list. This doesn't happen in other browsers like Firefox and Safari.

Any other solution other than putting autocomplete=off on the form tag??

Answer 1

This is due to a design decision made by Chrome (arguably any Chrome user wants this behaviour).

The reason for this is what Google calls priority of constituencies:

1. The user is king! What they want matters most.
2. The user wants to use a password or autofill manager.
3. The web application says it doesn't want the form values to be saved.
4. The user's choice is more important, so the form values are retained.

There are ways to work round, but it's highly likely that those will be fixed in future Chrome versions as the Chrome developers regard their behaviour as correct and your workaround as a bug.

Even while your workaround does work it creates confusing behaviour for the user - they expect autofill to work according to their settings.

Many users already chose to ignore app autocomplete settings with plug-ins or scripts that just remove any autocomplete=off in the page - they already had that choice anyway.

You're best off designing with the assumption that autocomplete can work and accounting for that.

Personally I hate it when sites don't recall my password and override those that do with browser extensions. However I also create applications for my job and there recalling passwords is seen as a security risk, as a user might leave their machine unlocked. In my personal opinion users not locking their machines is an issue for local IT, not the application, and local IT can disable all password autocomplete for all web applications if their users can't be trusted.

Unfortunately to pass the security checks some applications still have to disable autocomplete, there are ways to do it, but they're all horrible. The first hack is to make the password input completely new:

<input type="hidden" name="password" id="realPassword" />
<input type="password" name="{randomly generated}" 
    onchange="document.getElementById('realPassword').value = this.value" />

I've inlined everything to simplify, but this should give you an idea of the hack - no plug in or browser can auto-fill an input with a completely new name.

This solution breaks if you properly build in ARIA and labels (as that lets the browser/extension find and autofill the input from the label).

So option 2, also horrible, is to wait until after the autocomplete has fired and then blank the field:

<input type="text" name="username" 
    onchange="window.setTimeout(function() { 
        document.getElementById('password').value = ''; 
    }, 100)" />
<input type="password" id="password" />

Like I said, nasty.

Answer 2

It may be a bug on Google Chrome, you can't cheat by create an hidden input over. Auto complete feature will get the first input text to fill data.

<form autocomplete="off" id="search_form" method="post" action="">
    <input type="text" style="display:none" />
    <input autocomplete="off" type="text" />
</form>

Answer 3

This seems to be a recurrent issue in Google Chrome, although adding autocomplete off to the form did work in my build. Maybe in newer versions it doesn't anymore.

This is a hack. Give your input an id, say foo, and in JavaScript:

if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) {
    setTimeout(function () {
        document.getElementById('foo').autocomplete = 'off';
    }, 1);
}

Check if this works for you. The only downside to it would be that for those who use Chrome and have JavaScript disabled, the field would still be autocompleted.

Answer 4

The autocomplete attribute is new in HTML5.

Since you haven't mentioned the DOCTYPE, I think this is the only possible reason could be this. For further details check MDN's How to Turn Off Form Autocompletion.

Try adding the following HTML5 DOCTYPE.

<!DOCTYPE html>

FYI: In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu).

You're using it in a correct way mentioning autocomplete attribute under form element. However you don't need it to be mentioned separately for input tag.

<form autocomplete="off" id="search_form" method="post" action="">
    <input type="text" />
</form>

Update: Here you can find a list of solutions in autocomplete attribute and web documents using XHTML.

Answer 5

try this, worked for me after messing about for a bit

if ( navigator.userAgent.toLowerCase().indexOf('chrome') >= 0 ) {
    $('input[autocomplete="off"]').each( function(){
        var type = $(this).attr( 'type');
        $(this).attr( 'type', '_' + type );
        $(this).attr( 'type', type );
    });
}

Answer 6

if you are using AJAX call to submit data to backend. After completing AJAX call, password fields should be clear. Then password save prompt will not be popped.

Eg: $(#foo).val("");