Chrome ignores autocomplete="off"

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

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');
});

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+

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.

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

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.

Chrome ignores autocomplete="off"

Related

Recent Posts