How to remove auto complete input from google Chrome?

Question

I want to remove yellow background when this enabled auto complete from Google Chrome. I tried to disable auto complete by applying: autocomplete="off" and I was unsuccessful.

The top image is the view in Chrome and the bottom image is in Firefox, as it should be.

Answer 1

As stated here and here, it seems that currently Google Chrome ignores any kind of attribute autocomplete="off", however strange it may seem.

So a (workaround) solution to make Chrome not to do an autocomplete is to create 2 fields in a row with the same name="", one with display="none"(that will not be seen by the user) and other normal, something like that:

<form method="post">
  <input type="email" name="email" id="email_fake" class="hidden" autocomplete="off" style="display: none;" />
  <input type="email" name="email" id="email" autocomplete="off" />
  <input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;" />
  <input type="password" name="password" id="password" autocomplete="off" />
  <input type="submit" value="Submit" />
</form>

Example also available in jsFiddle.

Update 2017

It seems that in the current versions of Google Chrome (Tested on 59.0.3071.104), it is possible to resolve it in this way:

• autocomplete="off" on the tag form:

<form method="post" autocomplete="off">
  <input type="email" name="email" id="email" />
  <input type="password" name="password" id="password" />
  <input type="submit" value="Submit" />
</form>

Also in jsFiddle.

Answer 2

I tried many alternatives and arrived at this:

Usually autocomplete="off" or autocomplete="on"

So I put

autocomplete="no"

Worked.

Answer 3

Another solution I found was to disable the field, which makes the autocomplete not work in any browser (I tested it in Chrome, FF and IE).

Then just enable the field when the form is loaded, because at this point the browser will no longer fill in the fields:

<input type="email" id="email" disabled="disabled" />

And in the Javascript, after loading the document, enable the field. In this example, using jQuery:

// Esperar o documento carregar
$(document).ready(function () {
   // Usando um pequeno delay de 100ms porque às vezes o navegador preenche o campo logo que o documento está pronto, e pode não funcionar como esperado
   setTimeout(function(){
     $('#email').removeAttr('disabled');
   }, 100);
});

Answer 4

I tried to put the autocomplete in the form tag as the colleague quoted and it didn’t work. I did the duplication only email and worked for password too. No need to do for password. End of the problems with yellow fields in Chrome, I believe in other browsers too. This way worked:

<form method="post">
  <input type="email" name="email" id="email_fake" autocomplete="off" style="display: none;" />
  <input type="email" name="email" id="email" autocomplete="off" />
  <input type="password" name="password" id="password" autocomplete="off" />
  <input type="submit" value="Submit" />
</form>

Answer 5

Autocomplete="off" may not work in several cases.

I decided to add this javascript after the page onload:

var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  $('input[type=text]').attr('autocomplete',randomicAtomic);

Answer 6

Actually just put right after resolve <input style="display: none;" />, but when you enter an info it already has a yellow background.

Use this:

input:-webkit-autofill 
{    
    -webkit-box-shadow: 0 0 0px 1000px #f9fbfd inset !important;
    -webkit-text-fill-color: #4D90FE !important;
}

Answer 7

An alternative that I use and consider simple, would be putting a wait time and cleaning the values of the fields, since there is a short interval until the browser autocomplete with the suggestions, would be as follows:

With Jquery

setTimeout(function(){
  $('#user').val('');
  $('#pass').val('');
},420);

Sem Jquery

setTimeout(function(){
  document.getElementById('user').value = '';
  document.getElementById('pass').value = '';
},420);

I hope I’ve helped.

Answer 8

I managed to solve putting only one space in the email field in value, as the browser does not find an email that is a space, it does not fill anything and this space the browser itself cleans in Submit, follows below code:

<form method="post">
    <input type="email" name="email" id="email" value=" " />
    <input type="password" name="password" id="password" />
    <input type="submit" value="Salvar" />
</form>