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've solved the endless fight with Google Chrome with the use of random characters.

<input name="name" type="text" autocomplete="rutjfkde">

Hope that it will help to other people.

Answer 2

UPDATE

It seems now Chrome ignores the style="display: none;" or style="visibility: hidden; attributes.

You can change it to something like:

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

In my experience, Chrome only autocompletes the first <input type="password"> and the previous <input>. So I've added:

<input style="display:none">
<input type="password" style="display:none">

To the top of the <form> and the case was resolved.

Answer 3

Browser does not care about autocomplete=off auto or even fills credentials to wrong text field?

I fixed it by setting the password field to read-only and activate it, when user clicks into it or uses tab-key to this field.

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');"/>

Update: Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

By the way, more information on my observation:

Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks 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 control it, sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.

Answer 4

Whilst I agree autocomplete should be a user choice, there are times when Chrome is over-zealous with it (other browsers may be too). For instance, a password field with a different name is still auto-filled with a saved password and the previous field populated with the username. This particularly sucks when the form is a user management form for a web app and you don't want autofill to populate it with your own credentials.

Chrome completely ignores autocomplete="off" now. Whilst the JS hacks may well work, I found a simple way which works at the time of writing:

Set the value of the password field to the control character 8 ("\x08" in PHP or  in HTML). This stops Chrome auto-filling the field because it has a value, but no actual value is entered because this is the backspace character.

Yes this is still a hack, but it works for me. YMMV.

Answer 5

to anyone looking for a solution to this, I finally figure it out.

Chrome only obey's the autocomplete="off" if the page is a HTML5 page (I was using XHTML).

I converted my page to HTML5 and the problem went away (facepalm).

Answer 6

Prevent autocomplete of username (or email) and password:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

---

Prevent autocomplete a field (might not work):

<input type="text" name="field" autocomplete="nope">

Explanation:

autocomplete still works on an <input>despite having autocomplete="off", but you can change off to a random string, like nope.

---

Others "solutions" for disabling the autocomplete of a field (it's not the right way to do it, but it works):

1.

HTML:

<input type="password" id="some_id" autocomplete="new-password">

JS (onload):

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

or using jQuery:

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

---

2.

HTML:

<form id="form"></form>

JS (onload):

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

or using jQuery:

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

---

To add more than one field using jQuery:

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>

---

Works in:

• Chrome: 49+

• Firefox: 44+