28

Quero remover background amarelo de quando esta habilitado o auto complete do Google Chrome. Tentei desabilitar o auto complete, aplicando: autocomplete="off" e não tive sucesso.

Essa é a visualização de como é pra ficar. Esse print foi tirado do Firefox

Visualização no Chrome

A imagem de cima é a visualização no Chrome e a debaixo é no Firefox, como é pra ficar.

1
  • jsfiddle.net/jmn2d213/2. Cara, não precisa repetir os campos. Isso é a maior gambiarra que eu já vi em HTML. Coloca autocomplete="off" na tag <form>. Veja o Link no JsFiddle. Commented 3/12/2015 às 19:36

9 Respostas 9

32

Como dito aqui e aqui, parece que atualmente o Google Chrome ignora qualquer tipo de atributo autocomplete="off", por mais que isso pareça estranho.

Então uma solução (alternativa) para fazer com que o Chrome não faça um autocomplete é criando 2 campos seguidos com o mesmo name="", um com display="none"(que não será visto pelo usuário) e outro normal, algo assim:

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

Exemplo também disponível no jsFiddle.

Atualização 2017

Parece que nas versões atuais do Google Chrome (Testei na 59.0.3071.104), é possível resolver isso desta forma:

  • autocomplete="off" na 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>

Também no jsFiddle.

4
  • 1
    Obrigado @Fernando! Commented 6/05/2015 às 18:48
  • 1
    Oloco. Sério isso ? É só colocar autocomplete="off" ou autocomplete="false" na tag do <form>. Nem a pau vou fazer isso. Eu faço assim e funciona. Commented 3/12/2015 às 19:23
  • 2
    Ok @TaoPaiPai, esse resposta era verdade quando ela foi criada, se há uma melhor forma de obter o mesmo resultado, você pode criar uma resposta atualizada, com exemplo e demonstrando! Commented 3/12/2015 às 20:02
  • 1
    Essa alternativa realmente é uma "gambiarra", mas quando tem um email e um password na mesma tela parece que o Chrome entende que é um login... Nos outros caso só o autocomplete="off" funciona. Commented 7/01/2017 às 20:32
6

Uma outra solução que encontrei foi desabilitar o campo, o que faz com que o autocomplete não funcione em nenhum navegador (testei no Chrome, no FF e no IE).

Depois basta habilitar o campo quando o formulário estiver carregado, porque nesse ponto o navegador já não vai mais preencher os campos:

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

E no Javascript, após carregar o documento, habilitar o campo. Neste exemplo, usando 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);
});
1
  • Apenas convertendo em puro JS: function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time)); } sleep(400).then(async() => { document.getElementsByName('email')[0].disabled=false; }); Commented 7/04/2022 às 13:48
5

Tentei muitas alternativas e cheguei nesta:

Normalmente se coloca autocomplete="off" ou autocomplete="on"

Então coloquei

autocomplete="no"

Deu certo.

1
  • Funcionou para mim. Obrigado Commented 27/03/2021 às 15:19
2

Na verdade apenas colocar logo após resolve <input style="display: none;" />, porém quando você insere uma info ele ja fica com o fundo amarelo.

Use isto:

input:-webkit-autofill 
{    
    -webkit-box-shadow: 0 0 0px 1000px #f9fbfd inset !important;
    -webkit-text-fill-color: #4D90FE !important;
}
1
  • 7
    Pode complementar um pouco mais sua resposta? O que o trecho do código faz exatamente? Commented 3/12/2015 às 19:32
2

Tentei colocar o autocomplete na tag form como o colega citou e não funcionou. Fiz a duplicação somente do email e funcionou para a senha também. Não precisa fazer para a senha. Fim dos problemas com campos amarelos no Chrome, acredito que em outros navegadores também. Desta forma deu certo:

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

0
2

O autocomplete="off" pode não funcionar em diversos casos.

Eu resolvi adicionando este javascript depois do onload da página:

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

Uma alternativa que utilizo e considero simples, seria colocando um tempo de espera e limpando os valores dos campos, já que existe um pequeno intervalo até o navegador autocompletar com as sugestões, ficaria da seguinte forma:

Com JQuery

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

Sem JQuery

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

Espero ter ajudado.

-1

Depois de testar algumas das opções apresentadas aqui, cheguei em uma solução em Js utilizando como base o apresentado pelo Ricardo Pontual, mas aplicando de uma forma que ficasse melhor no entendimento futuro.

Para ajustar, adicione o "autocomplete='off'" no input que deseja remover o AutoComplete e em seguida, adicione esse Script ao .js:

document.addEventListener("DOMContentLoaded", function(e) {
   let input = document.querySelector('input[autocomplete="off"]');

   input.setAttribute('disabled', 'disabled');

   setTimeout(function(){
      input.removeAttribute('disabled');
   }, 1000)
});

Ele irá adicionar o "disabled" a todos os inputs com o "autocomplete" definido como "off" e após 1 segundo (tempo comum para o Chrome tentar preencher) irá remover o "disabled".

-4

Consegui resolver colocando apenas um espaço no campo e-mail no value, como o navegador não encontra um e-mail que é um espaço, ele não preenche nada e esse espaço o próprio navegador limpa no submit, segue abaixo código:

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

1
  • 3
    Esse espaço aí vai acabar inutilizando o placeholder.
    – LipESprY
    Commented 10/03/2019 às 13:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .