autocomplete="off" not working for Google Chrome

Question

This question has been asked Several times in the past but unfortunately there's no way i could disable autofill for Google Chrome (v.36.0.1985.125 m)

I have already Tried

"AutoComplete=Off" not working on Google Chrome Browser

How do I stop Chrome from pre-populating input boxes?

how to disable google chrome suggestion list when using twitter bootstrap typeahead?

Code tested so far

<form autocomplete="off">

<asp:textbox autocomplete="off">

AutoCompleteType="Disabled"

But I still get autofiled data on my login page. Passwords are populated even if Textbox Ids are changed.

Answer 1

Since I have been having this very same issue and it seems all "alternatives" stopped working as the browsers have been getting recent updates, I came across a "dirty" solution that baffled me completely.

If we go on each field we want to disable the autocomplete feature and set its autocomplete attribute to an invalid value (only "off" and "on" are valid), the browser will stop trying to autofill those fields because of that.

Surprised? So was I!

Example:

<input type="text" autocomplete="stopdoingthat" />

And apparently it works. Stupid, I know, but it's a "dirty" one that actually works for now.

Answer 2

Recent Version of Google Chrome are forcing Autofill irrespective of the Autocomplete=off . You are going to need little bit of hack here. Some of the previous hacks don't work anymore (34+ versions)

I have tested following code on Google Chrome v36.

It removes "name" and "id" attributes from elements and assigns them back after 1ms. This works perfectly in my case.

Put this code in document ready.

 $(document).ready(function () {

$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {

                var input = this;
                var name = $(input).attr('name');
                var id = $(input).attr('id');

                $(input).removeAttr('name');
                $(input).removeAttr('id');

                setTimeout(function () {
                    $(input).attr('name', name);
                    $(input).attr('id', id);
                }, 1);
            });
         });;

Answer 3

This readonly-fix worked for me:

fix browser autofill in: readonly and set writeble on focus (at mouse click and tabbing through fields)

 <input type="password" readonly  
     onfocus="$(this).removeAttr('readonly');"/>

By the way, some more information on Chrome and Safari auto fill behaviour:

Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field. I guess, the Chrome and Safari look for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not directly control it, but the read-only trick above fixes it. :-)

Answer 4

Figured I'd update this with a 2016 post. I used a combo of both Sangram's solution, as well as dsuess'. This is working for me as of the time of this post.

Sangram's solution unfortunately no longer worked for me with a later Chrome version, but using dsuess' method of marking the fields as readonly, while not visually appealing (since they stay readonly until you actually focus on the element, which isn't the most intuitive way to do it - but whatever works, right?), did still work.

By combining the two, we no longer require the user to focus on the field. Here is my web page code:

<asp:TextBox ID="TeamName" runat="server" TextMode="SingleLine" AutoCompleteType="Disabled" ReadOnly="true"></asp:TextBox>

Which, for the curious, after being parsed by IIS, renders to the following raw HTML:

<input name="ctl00$MainContent$uc_CreateTeam$TeamName" type="text" autocomplete="off" id="MainContent_uc_CreateTeam_TeamName" readonly="readonly">

The accompanying js:

// Disable autocomplete for form fields. This is done by setting the 'autocomplete' attribute (which is deprecated)
// as an indicator that we want this field to not be autofilled. We also set these forms to load as readonly (which
// will cause browsers to ignore them), and now we mark them writable.
$(document).ready(function() {
  $('form[autocomplete="off"] input, input[autocomplete="off"]').each(function() {
    var input = this;
    setTimeout(function() {
      $(input).removeAttr('readonly');
    }, 200); // 100 does not work - too fast.
  });
});

Hopefully this helps any stragglers still looking for the solution a few years later!

Answer 5

Look, the only way to fix this is to petition the Chromium developers. Get on their forums and tell them what a pain this is. Every workaround is eventually destroyed by them.

https://bugs.chromium.org/p/chromium/issues/detail?id=914451

As of right now, having a unique ID on the control fixes it.

My recommendation is to use the user's session ID as part of the control ID on the page. That currently works across the board. But it won't forever.

Answer 6

Make type of password field as 'text' and change it to 'password' on click.

HTML:

<input autocomplete="off" id='username'>
<input autocomplete="off" id='password' type="text" onclick="changeType('password')">

js:

changeType(id) {
    document.getElementById(id).setAttribute('type', 'password');
}

Answer 7

For Asp.Net TextBox adding TextMode="Search" and AutoCompleteType="Disabled" worked for me

<asp:TextBox runat="server" ID="txtAddress" CssClass="form-control" TextMode="Search" AutoCompleteType="Disabled"></asp:TextBox>

and i tested this in both Edge (Version 89.0.774.48) and Chrome (Version 88.0.4324.190 )

Answer 8

My suggestion change the name of the control. For example, I had a control named txtFirsName and always it showed me autocomplete suggestions, I changed by txtFN and Ready!