"AutoComplete=Off" not working on Google Chrome Browser

html google-chrome forms

82,594

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

The user is king! What they want matters most.
The user wants to use a password or autofill manager.
The web application says it doesn't want the form values to be saved.
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.

Solution 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>

Solution 3

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.

Solution 4

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.

View more solutions

82,594

Author by

user2492270

Updated on February 04, 2022

Comments

user2492270 about 2 years
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??
rink.attendant.6 over 10 years

Would you mind citing your source for that quote?
rink.attendant.6 over 10 years

I just spent a good portion of time looking at that page and it doesn't contain that quote; neither did anything on Google apart from this page itself.
Praveen over 10 years

@rink.attendant.6 The quote is used is from w3schools.com/tags/att_input_autocomplete.asp. MDN is widely accepts whereas W3Schools is not.
Chloe almost 10 years

Wow even that didn't work.
Keith almost 10 years

This hack no longer works, as of Chrome 34
Blair Anderson about 9 years

USE CASE: I have a web-app cash register in my retail store. I have multiple employees using this web app. In no way do i want a password manager, because MY admin password would be stored, and non-admin users could more easily access.
Keith about 9 years

@BlairAnderson yes - so you would want autocomplete to always be off for that machine. Turn it on for your personal machine, off for the shared one - in either case whether to autocomplete is a choice of the local browser, not the application.
Keith almost 9 years

So many downvotes - anyone mind explaining why this is a bad answer before voting down?
camiblanch over 8 years

You can also set autocomplete to a random string such as "noautocomplete" or something other than "on". The browser is built to recognize "off", but not random strings. Doing so will disable the browser autofill
3xCh1_23 almost 8 years

Thank you for saving a day! nothing worked, and your solution simply did.
code4kix over 7 years

Although some of the answers to this question may have worked in the past, currently one way to prevent the browser from popping up the password manager is to have at least two separate additional hidden password inputs, each with different dummy values, like so: stackoverflow.com/a/41882977/5150013
Rohit Bandooni over 5 years

I don't think this question has to do anything with resetting password fields
ledlogic over 3 years

When consumers are building unique products this feature is not helpful at all it is inserting random data for consumers causing poor data quality, it is causing waste of manufacturing time and resources for improperly configured product. Honoring autocomplete="off" would be simple and prevent security/poor data/waste. Does anyone understand how the mantle defined in the spec could be changed? We want the first mantle,autofill expectation mantle. but chrome appears to be using autofill anchor mantle html.spec.whatwg.org/multipage/…
Keith over 3 years

@ledlogic I think there are legacy reasons for autocomplete="off" not working that are a bit of a mess to fix now. I don't think changing this behaviour is simple unfortunately.
user3413723 over 3 years

Adding a surrounding <form autocomplete="off"> worked great in Chrome 87 for me!
ICW about 2 years

Even while your workaround does work it creates confusing behaviour for the user - they expect autofill to work according to their settings. you know what's more confusing for the user? when google's autocomplete tries to fill in a field with a value that makes absolutely no sense. There's no way in a million years this shouldn't be able to be easily disabled by the developer. I'm literally using a google UI library (material UI for react) and their own autocomplete breaks one of their inputs.
Keith about 2 years

@ICW I completely agree - work with autocomplete, not against it. Doing either of the hack I suggest in this answer will make your application worse (and it's much worse now than when I originally answered, 8yo). But... sometimes you have to. I've seen this IRL in response to a (very poorly done) penetration test where they insisted that remembering passwords was a risk (wrong) and my bosses at the time insisted on that being 'fixed'.