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

Answer 1

autocomplete="off" is usually working, but not always. It depends on the name of the input field. Names like "address", 'email', 'name' - will be autocompleted (browsers think they help users), when fields like "code", "pin" - will not be autocompleted (if autocomplete="off" is set)

My problems was - autocomplete was messing with google address helper

I fixed it by renaming it

from

<input type="text" name="address" autocomplete="off">

to

<input type="text" name="the_address" autocomplete="off">

Tested in chrome 71.

Answer 2

Instead of autocomplete="off" use autocomplete="false" ;)

from: https://stackoverflow.com/a/29582380/75799

Answer 3

I just updated to Chrome 49 and Diogo Cid's solution doesn't work anymore.

I made a different workaround hiding and removing the fields at run-time after the page is loaded.

Chrome now ignores the original workaround applying the credentials to the first displayed type="password" field and its previous type="text" field, so I have hidden both fields using CSS visibility: hidden;

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

I know that it may seem not very elegant but it works.

Answer 4

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 5

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+

Answer 6

I solved in another way. You can try this.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>