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.

Solution 1

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+

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

Solution 3

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

Solution 4

2021 UPDATE:
Change <input type="text"> to <input type="search" autocomplete="off" >

That is all. Keeping the below answer around for nostalgia.

---

For a reliable workaround, you can add this code to your layout page:

<div style="display: none;">
 <input type="text" id="PreventChromeAutocomplete" 
  name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Chrome respects autocomplete=off only when there is at least one other input element in the form with any other autocomplete value.

This will not work with password fields--those are handled very differently in Chrome. See https://code.google.com/p/chromium/issues/detail?id=468153 for more details.

UPDATE: Bug closed as "Won't Fix" by Chromium Team March 11, 2016. See last comment in my originally filed bug report, for full explanation. TL;DR: use semantic autocomplete attributes such as autocomplete="new-street-address" to avoid Chrome performing autofill.

Solution 5

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

View more solutions