Estou enfrentando problemas com o comportamento de preenchimento automático do chrome em vários formulários.

Todos os campos no formulário têm nomes muito comuns e precisos, como "email", "nome" ou "senha", e também foram autocomplete="off"definidos.

O sinalizador de preenchimento automático desativou com êxito o comportamento de preenchimento automático, onde uma lista suspensa de valores aparece quando você começa a digitar, mas não alterou os valores nos quais o Chrome preenche automaticamente os campos.

Esse comportamento seria bom, exceto que o chrome está preenchendo as entradas incorretamente, por exemplo, preenchendo a entrada do telefone com um endereço de email. Os clientes se queixaram disso, portanto, verificou-se que isso estava acontecendo em vários casos, e não como algum tipo de resultado de algo que eu fiz localmente na minha máquina.

A única solução atual em que consigo pensar é gerar dinamicamente nomes de entrada personalizados e, em seguida, extrair os valores no back-end, mas isso parece uma maneira bastante invasiva de contornar esse problema. Existem tags ou peculiaridades que alteram o comportamento do preenchimento automático que podem ser usadas para corrigir isso?

Para novas versões do Chrome, basta inserir o autocomplete="new-password"seu campo de senha e pronto. Eu verifiquei, funciona bem.

Você recebeu essa dica do desenvolvedor Chrome nesta discussão: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

PS Observe que o Chrome tentará inferir o comportamento de preenchimento automático a partir do nome, ID e qualquer conteúdo de texto que possa obter ao redor do campo, incluindo rótulos e nós de texto arbitrários. Se houver um token de preenchimento automático como street-addressno contexto, o Chrome o preencherá automaticamente como tal. A heurística pode ser bastante confusa, pois às vezes só é acionada se houver campos adicionais no formulário ou não, se houver muito poucos campos no formulário. Observe também que autocomplete="no"parece funcionar, mas autocomplete="off"não por razões históricas. autocomplete="no"você está dizendo ao navegador que esse campo deve ser preenchido automaticamente como um campo chamado "no". Se você gerar autocompletenomes aleatórios exclusivos, desabilitará o preenchimento automático.

Se seus usuários tiverem visitado formulários inválidos, suas informações de preenchimento automático poderão estar corrompidas . Fazer com que eles entrem manualmente e corrijam suas informações de preenchimento automático no Chrome pode ser uma ação necessária deles.

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=passwordcampo. 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:nonesignificam 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"

Após meses e meses de luta, descobri que a solução é muito mais simples do que você pode imaginar:

Em vez de autocomplete="off"usarautocomplete="false" ;)

Tão simples como isso e funciona como um encanto no Google Chrome também!

Atualização de agosto de 2019 (crédito para @JonEdiger nos comentários)

Nota: muitas informações on-line dizem que os navegadores agora tratam o preenchimento automático = 'falso' como o preenchimento automático = 'desativado'. Pelo menos neste momento, está impedindo o preenchimento automático para esses três navegadores.

Defina-o no nível do formulário e, em seguida, para as entradas que você deseja, defina um valor não válido como 'none':

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>

Às vezes até autocomplete=off , nem impede o preenchimento de credenciais em campos incorretos.

Uma solução alternativa é desativar o preenchimento automático do navegador usando o modo somente leitura e definir a gravação no foco:

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

o focus evento ocorre com cliques do mouse e tabulação nos campos.

Atualizar:

O Mobile Safari define o cursor no campo, mas não mostra o teclado virtual. Essa nova solução alternativa funciona como antes, mas lida com o teclado virtual:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Demonstração ao vivo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Explicação: O navegador preenche automaticamente as credenciais no campo de texto errado?

preenchendo as entradas incorretamente, por exemplo, preenchendo a entrada do telefone com um endereço de e-mail

Às vezes, percebo esse comportamento estranho no Chrome e Safari, quando existem campos de senha no mesmo formulário. Eu acho que o navegador procura um campo de senha para inserir suas credenciais salvas. Em seguida, ele preenche automaticamente o nome de usuário no campo de entrada semelhante a texto mais próximo, que aparece antes do campo de senha no DOM (apenas adivinhando devido à observação). Como o navegador é a última instância e você não pode controlá-lo,

Essa correção somente de leitura acima funcionou para mim.

Se você estiver implementando um recurso da caixa de pesquisa, tente definir o typeatributo da searchseguinte maneira:

<input type="search" autocomplete="off" />

Isso está funcionando para mim no Chrome v48 e parece ser uma marcação legítima:

https://www.w3.org/wiki/HTML/Elements/input/search

Tente isso. Eu sei que a pergunta é um pouco antiga, mas esta é uma abordagem diferente para o problema.

Notei também que o problema surge logo acima do password campo.

Eu tentei os dois métodos como

<form autocomplete="off"> e <input autocomplete="off"> mas nenhum deles funcionou para mim.

Corrigi-o usando o trecho abaixo - apenas adicionei outro campo de texto logo acima do campo de tipo de senha e o fiz display:none .

Algo assim:

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

Espero que ajude alguém.

Não sei por que, mas isso me ajudou e funcionou.

<input type="password" name="pwd" autocomplete="new-password">

Não sei por que, mas o preenchimento automático = "nova senha" desativa o preenchimento automático. Funcionou nos últimos versão 49.0.2623.112 chrome.

Para mim simples

<form autocomplete="off" role="presentation">

Fiz isso.

Testado em várias versões, a última tentativa foi em 56.0.2924.87

Você precisa adicionar este atributo:

autocomplete="new-password"

Link da fonte: Artigo completo

É tão simples e complicado :)

google chrome, basicamente, procurar cada primeiro elemento senha visível dentro do <form>, <body>e <iframe>tags para permitir recarga automática para eles, então desativar isso, você precisa adicionar um elemento senha simulada como o seguinte:

1. • se o seu elemento de senha estiver dentro de uma <form>tag, você precisará colocar o elemento dummy como o primeiro elemento no seu formulário imediatamente após <form>a tag aberta

   • se seu elemento de senha não estiver dentro de uma <form>tag, coloque o elemento fictício como o primeiro elemento em sua página html imediatamente após <body>a tag aberta

2. Você precisa ocultar o elemento fictício sem usar o css; display:noneportanto, use basicamente o seguinte como um elemento de senha fictícia.

   <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>

Aqui estão minhas soluções propostas, já que o Google está insistindo em substituir todas as soluções alternativas que as pessoas parecem fazer.

Opção 1 - selecione todo o texto ao clicar

Defina os valores das entradas como um exemplo para o seu usuário (por exemplo [email protected]) ou o rótulo do campo (por exemplo Email) e adicione uma classe chamada focus-selectàs suas entradas:

<input type="text" name="email" class="focus-select" value="[email protected]">
<input type="password" name="password" class="focus-select" value="password">

E aqui está o jQuery:

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

Eu realmente não consigo ver o Chrome mexendo com valores. Isso seria loucura. Então, espero que seja uma solução segura.

Opção 2 - defina o valor do email para um espaço e exclua-o

Supondo que você tenha duas entradas, como email e senha, defina o valor do campo de email como " "(um espaço) e inclua o atributo / valor autocomplete="off"e limpe-o com JavaScript. Você pode deixar o valor da senha em branco.

Se o usuário não tiver JavaScript por algum motivo, certifique-se de aparar a entrada do servidor (provavelmente deve ser assim mesmo), caso não exclua o espaço.

Aqui está o jQuery:

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

Marquei um tempo limite 15porque 5parecia funcionar ocasionalmente nos meus testes, por isso triplicar esse número parece uma aposta segura.

Não definir o valor inicial para um espaço faz com que o Chrome deixe a entrada como amarela, como se a preenchesse automaticamente.

Opção 3 - entradas ocultas

Coloque isso no início do formulário:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

Certifique-se de manter a anotação HTML para que seus outros desenvolvedores não a excluam! Verifique também se o nome da entrada oculta é relevante.

Use css text-security: disc sem usar type = password .

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

css

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}

Em alguns casos, o navegador continuará sugerindo valores de preenchimento automático, mesmo se o atributo de preenchimento automático estiver desativado. Esse comportamento inesperado pode ser bastante intrigante para os desenvolvedores. O truque para realmente forçar o não preenchimento automático é atribuir uma sequência aleatória ao atributo , por exemplo:

autocomplete="nope"

Descobri que adicionar isso a um formulário impede o Chrome de usar o preenchimento automático.

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Encontrado aqui. https://code.google.com/p/chromium/issues/detail?id=468153#hc41

Realmente decepcionante que o Chrome tenha decidido que sabe melhor do que o desenvolvedor sobre quando preencher automaticamente. Tem uma sensação real da Microsoft.

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

adicionar atributo somente leitura à tag junto com o evento onfocus, removendo-o corrige o problema

Para combinações de senha de nome de usuário, esse é um problema fácil de resolver. A heurística do Chrome procura o padrão:

<input type="text">

Seguido por:

<input type="password">

Simplesmente quebre esse processo invalidando isso:

<input type="text">
<input type="text" onfocus="this.type='password'">

Mike Nelsons forneceu que a solução não funcionou para mim no Chrome 50.0.2661.102 m. Simplesmente adicionando um elemento de entrada do mesmo tipo à exibição: nenhum conjunto não desabilita mais o preenchimento automático do navegador nativo. Agora é necessário duplicar o atributo name do campo de entrada no qual você deseja desativar o preenchimento automático.

Além disso, para evitar a duplicação do campo de entrada quando eles estão dentro de um elemento do formulário, você deve colocar um desativado no elemento que não é exibido. Isso impedirá que esse elemento seja enviado como parte da ação do formulário.

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

Em 2016, o Google Chrome começou a ignorar, autocomplete=offembora esteja no W3C. A resposta que eles postaram :

A parte complicada aqui é que, em algum lugar ao longo da jornada da web, o preenchimento automático = desativado se torna um padrão para muitos campos de formulário, sem que se pense realmente se isso era bom ou não para os usuários. Isso não significa que não há casos muito válidos em que você não deseja que os dados de preenchimento automático do navegador (por exemplo, nos sistemas de CRM), mas em geral, nós os vemos como casos minoritários. E, como resultado, começamos a ignorar o preenchimento automático = desativado nos dados do preenchimento automático do Chrome.

O que diz essencialmente: sabemos melhor o que um usuário deseja.

Eles abriram outro bug para publicar casos de uso válidos quando o preenchimento automático = desativado é necessário

Não vi problemas relacionados ao preenchimento automático em todo o meu aplicativo B2B, mas apenas com a entrada de um tipo de senha.

O preenchimento automático é ativado se houver algum campo de senha na tela, mesmo um oculto. Para quebrar essa lógica, você pode colocar cada campo de senha em seu próprio formulário, se não quebrar sua lógica de página.

<input type=name >

<form>
    <input type=password >
</form>

Se você está tendo problemas com a manutenção de espaços reservados, mas com a desativação do preenchimento automático do Chrome, achei esta solução alternativa.

Problema

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

O exemplo acima ainda produz o problema de preenchimento automático, mas se você usar required="required"CSS e algum CSS, poderá replicar os espaços reservados e o Chrome não selecionará as tags.

Solução

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

Eu realmente não gostei de criar campos ocultos, acho que ficar assim ficará muito confuso muito rápido.

Nos campos de entrada que você deseja parar de concluir automaticamente, isso funcionará. Torne os campos somente leitura e, em foco, remova esse atributo como este

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

o que isso faz é primeiro remover o atributo somente leitura selecionando o campo e, nesse momento, provavelmente você será preenchido com sua própria entrada do usuário e curvando o preenchimento automático para assumir o controle

Os valores inseridos anteriormente armazenados em cache pelo chrome são exibidos como lista de seleção suspensa. Isso pode ser desabilitado pelo preenchimento automático = desativado, o endereço explicitamente salvo nas configurações avançadas do chrome fornece pop-up de preenchimento automático quando um campo de endereço fica em foco. Isso pode ser desabilitado pelo preenchimento automático = "false" . Mas permitirá que o chrome exiba valores em cache no menu suspenso.

Em um campo html de entrada a seguir desativará os dois.

Role="presentation" & autocomplete="off"

Ao selecionar os campos de entrada para o preenchimento automático de endereço, o Chrome ignora os campos de entrada que não possuem o elemento html label anterior.

Para garantir que o analisador chrome ignore um campo de entrada para o pop-up de endereço de preenchimento automático, é possível adicionar um botão oculto ou controle de imagem entre o rótulo e a caixa de texto. Isso interromperá a sequência de análise de cromo da criação de pares de etiqueta-entrada para preenchimento automático. As caixas de seleção são ignoradas ao analisar os campos de endereço

O Chrome também considera o atributo "for" no elemento label. Ele pode ser usado para interromper a sequência de análise do chrome.

Bem, como todos nós temos esse problema, investi algum tempo para escrever uma extensão jQuery para esse problema. O Google precisa seguir a marcação html, não seguimos o Google

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

Adicione isso a um arquivo como /js/jquery.extends.js e inclua-o no jQuery. Aplique-o a cada elemento do formulário ao carregar o documento da seguinte maneira:

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle com testes

Experimente o seguinte jQuerycódigo que funcionou para mim.

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

Há duas partes nisso. O Chrome e outros navegadores lembram os valores inseridos anteriormente para nomes de campos e fornecem uma lista de preenchimento automático para o usuário com base nisso (principalmente as entradas de tipo de senha nunca são lembradas dessa maneira, por razões bastante óbvias). Você pode adicionarautocomplete="off" para evitar isso em coisas como o seu campo de email.

No entanto, você tem preenchimentos de senha. A maioria dos navegadores tem suas próprias implementações internas e também existem muitos utilitários de terceiros que fornecem essa funcionalidade. Você não pode parar. É o usuário que faz sua própria escolha para salvar essas informações para serem automaticamente preenchidas posteriormente, e está completamente fora do escopo e esfera de influência do seu aplicativo.

De acordo com o relatório de bug do Chromium # 352347, o Chrome não respeita mais autocomplete="off|false|anythingelse", nem nos formulários nem nas entradas.

A única solução que funcionou para mim foi adicionar um campo de senha fictícia :

<input type="password" class="hidden" />
<input type="password" />

Ao definir autocompletecomo offdeve funcionar aqui, tenho um exemplo que é usado pelo google na página de pesquisa. Eu achei isso do elemento inspecionar.

editar : Caso offnão esteja funcionando, tente falseou nofill. No meu caso, ele está trabalhando com a versão 48.0 do chrome

Aqui está um truque sujo -

Você tem seu elemento aqui (adicionando o atributo desativado):

<input type="text" name="test" id="test" disabled="disabled" />

E então, na parte inferior da sua página, coloque um pouco de JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

Solução diferente, baseada em webkit. Como já mencionado, sempre que o Chrome encontra um campo de senha, ele preenche automaticamente o email. AFAIK, independentemente do preenchimento automático = [tanto faz].

Para contornar isso, altere o tipo de entrada para texto e aplique a fonte de segurança do kit da web da forma que desejar.

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

Pelo que posso ver, isso é pelo menos tão seguro quanto o tipo de entrada = senha, é copiar e colar seguro. No entanto, é vulnerável removendo o estilo que removerá os asteriscos, é claro que o tipo de entrada = password pode ser facilmente alterado para texto de tipo = input no console para revelar todas as senhas preenchidas automaticamente, então é a mesma coisa.

A única maneira que funciona para mim foi: (jQuery necessário)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Eu já enfrentei o mesmo problema. E aqui está a solução para desativar o preenchimento automático de nome de usuário e senha no Chrome (testado apenas com o Chrome)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">