Acabei de descobrir que, se você tiver um nome de usuário e senha lembrados para um site, a versão atual do Chrome preencherá automaticamente seu nome de usuário / endereço de email no campo antes de qualquer type=password
campo. Ele não se importa com o nome do campo - apenas assume o campo antes que a senha seja seu nome de usuário.
Solução antiga
Basta usar <form autocomplete="off">
e impedir que a senha seja preenchida previamente, bem como qualquer tipo de preenchimento heurístico de campos com base nas suposições que um navegador pode fazer (que geralmente estão erradas). Em vez de usar o <input autocomplete="off">
que parece ser praticamente ignorado pelo preenchimento automático de senha (no Chrome, ou seja, o Firefox obedece).
Solução atualizada
O Chrome agora ignora <form autocomplete="off">
. Portanto, minha solução original (que eu havia excluído) agora é toda a raiva.
Basta criar alguns campos e escondê-los com "display: none". Exemplo:
<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
Em seguida, coloque seus campos reais por baixo.
Lembre-se de adicionar o comentário ou outras pessoas em sua equipe se perguntarão o que você está fazendo!
Atualização de março de 2016
Acabei de testar com o Chrome mais recente - tudo de bom. Esta é uma resposta bastante antiga agora, mas quero apenas mencionar que nossa equipe a utiliza há anos em dezenas de projetos. Ainda funciona muito bem, apesar de alguns comentários abaixo. Não há problemas com acessibilidade, porque os campos display:none
significam que eles não obtêm o foco. Como eu mencionei, você precisa colocá-los antes seus campos reais.
Se você estiver usando o javascript para modificar seu formulário, será necessário um truque extra. Mostre os campos falsos enquanto você manipula o formulário e oculte-os novamente um milissegundo depois.
Exemplo de código usando jQuery (supondo que você dê uma classe aos seus campos falsos):
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
},1);
Atualização julho 2018
Minha solução não funciona mais tão bem, pois os especialistas em anti-usabilidade do Chrome estão trabalhando duro. Mas eles nos jogaram um osso na forma de:
<input type="password" name="whatever" autocomplete="new-password" />
Isso funciona e resolve principalmente o problema.
No entanto, ele não funciona quando você não possui um campo de senha, mas apenas um endereço de email. Também pode ser difícil fazê-lo parar de ficar amarelo e pré-encher. A solução de campos falsos pode ser usada para corrigir isso.
De fato, às vezes você precisa colocar dois lotes de campos falsos e experimentá-los em lugares diferentes. Por exemplo, eu já tinha campos falsos no início do meu formulário, mas o Chrome recentemente começou a preencher novamente o meu campo 'E-mail' - então eu dobrei e coloquei mais campos falsos antes do campo 'E-mail', e isso foi corrigido . A remoção do primeiro ou do segundo lote dos campos é revertida para o preenchimento automático excessivamente zeloso.
Atualização Mar 2020
Não está claro se e quando essa solução ainda funciona. Parece que ainda funciona algumas vezes, mas não o tempo todo.
Nos comentários abaixo, você encontrará algumas dicas. Uma que acabou de ser adicionada por @anilyeni pode valer mais investigação:
Como notei, autocomplete="off"
funciona no Chrome 80, se houver menos de 3 elementos no<form>
. Não sei qual é a lógica ou onde está a documentação relacionada.
Também este da @dubrox pode ser relevante, embora eu não o tenha testado:
muito obrigado pelo truque, mas atualize a resposta, pois display:none;
não funciona mais, mas position: fixed;top:-100px;left:-100px; width:5px;
funciona :)
Atualização ABRIL 2020
Um valor especial para chrome para este atributo está executando o trabalho: (testado na entrada - mas não por mim)
autocomplete="chrome-off"