O Chrome ignora o preenchimento automático = “desativado”

Eu criei uma aplicação web que usa um dropbox tagbox. Isso funciona muito bem em todos os navegadores, exceto no navegador Chrome (versão 21.0.1180.89).

Apesar dos campos de input E do campo de form terem o atributo autocomplete="off" , o Chrome insiste em mostrar um histórico suspenso de inputs anteriores para o campo, que está destruindo a lista do tagbox.

   

ATUALIZAR

Parece que agora o Chrome ignora o style="display: none;" ou style="visibility: hidden; attributes.

Você pode mudá-lo para algo como:

   

Na minha experiência, o Chrome só autocomplete o primeiro e o anterior. Então eu adicionei:

   

Para o topo do

e o caso foi resolvido.

Evitar o preenchimento automático do nome de usuário (ou e-mail) e senha:

   

Evitar autocomplete um campo ( pode não funcionar ):

  

Explicação:

autocomplete ainda funciona em um apesar de ter autocomplete="off" , mas você pode mudar para uma string aleatória, como nope .


Outras “soluções” para desabilitar o preenchimento automático de um campo (não é o jeito certo de fazer isso, mas funciona):

1

HTML:

  

JS (onload):

 (function() { var some_id = document.getElementById('some_id'); some_id.type = 'text'; some_id.removeAttribute('autocomplete'); })(); 

ou usando jQuery:

 $(document).ready(function() { var some_id = $('#some_id'); some_id.prop('type', 'text'); some_id.removeAttr('autocomplete'); }); 

2

HTML:

 

JS (onload):

 (function() { var input = document.createElement('INPUT'); input.type = 'text'; document.getElementById('form').appendChild(input); })(); 

ou usando jQuery:

 $(document).ready(function() { $('', { type: 'text' }).appendTo($('#form')); }); 

Para adicionar mais de um campo usando jQuery:

 function addField(label) { var div = $('
'); var input = $('', { type: 'text' }); if(label) { var label = $('
  

Parece que o Chrome agora ignora o autocomplete="off" menos que esteja na tag

.

Para uma solução confiável, você pode adicionar esse código à sua página de layout:

 

O Chrome respeita o autocomplete = off apenas quando há pelo menos um outro elemento de input no formulário com qualquer outro valor de preenchimento automático.

Isso não funcionará com os campos de senha. Eles são tratados de maneira muito diferente no Chrome. Consulte https://code.google.com/p/chromium/issues/detail?id=468153 para mais detalhes.

ATUALIZAÇÃO: O bug foi fechado como “não será corrigido” pela equipe do Chromium em 11 de março de 2016. Veja o último comentário no meu relatório de bug originalmente arquivado para obter uma explicação completa. TL: DR: use atributos de preenchimento automático semântico, como autocomplete = “new-street-address”, para evitar que o Google Chrome realize o preenchimento automático.

Abordagem Moderna

Basta fazer sua input readonly para readonly e, em foco, remova-a. Essa é uma abordagem muito simples e os navegadores não preencherão inputs de readonly . Portanto, esse método é aceito e nunca será substituído por futuras atualizações do navegador.

  

Estilize sua input de maneira que ela não pareça uma input readonly

 input[readonly] { cursor: text; background-color: #fff; } 

EXEMPLO DE TRABALHO

A versão 34 do Chrome agora ignora o autocomplete=off , veja isso .

Muita discussão sobre se isso é uma coisa boa ou ruim? Qual é a sua opinião?

A solução no momento é usar o type="search" . O Google não aplica o preenchimento automático a inputs com um tipo de pesquisa.

Veja: https://twitter.com/Paul_Kinlan/status/596613148985171968

Atualização 04/04/2016: Parece que isso está resolvido! Veja http://codereview.chromium.org/1473733008

Bem, um pouco atrasado para a festa, mas parece que há um pouco de mal-entendido sobre como o autocomplete deve e não deve funcionar. De acordo com as especificações de HTML, o agente do usuário (neste caso, o Chrome) pode replace o autocomplete :

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

Um agente do usuário pode permitir que o usuário substitua o nome do campo de autopreenchimento de um elemento, por exemplo, altere-o de “desativado” para “ativado” para permitir que os valores sejam lembrados e preenchidos apesar das objeções do autor da página ou sempre “desativado” valores. No entanto, os agentes de usuário não devem permitir que os usuários substituam o nome do campo de preenchimento automático de “desativado” para “ativado” ou outros valores, pois há implicações significativas de segurança para o usuário se todos os valores forem sempre lembrados, independentemente das preferências do site.

Assim, no caso do Chrome, os desenvolvedores basicamente disseram “deixaremos isso para o usuário decidir em suas preferências se eles querem que o autocomplete funcione ou não. Se você não quiser, não o habilite em seu navegador “.

No entanto, parece que isso é um pouco excessivamente zeloso da parte deles para o meu gosto, mas é assim que é. A especificação também discute as possíveis implicações de segurança de tal mudança:

A palavra-chave “off” indica que os dados de input do controle são particularmente sensíveis (por exemplo, o código de ativação de uma arma nuclear); ou que é um valor que nunca será reutilizado (por exemplo, uma chave única para um login no banco) e o usuário terá, portanto, que inserir os dados explicitamente a cada vez, em vez de poder contar com o UA para pré-preencher o valor para ele; ou que o documento fornece seu próprio mecanismo de preenchimento automático e não deseja que o agente do usuário forneça valores de autocomplete.

Então, depois de experimentar a mesma frustração que todos os outros, encontrei uma solução que funciona para mim. É semelhante na veia às respostas autocomplete="false" .

Um artigo da Mozilla fala exatamente sobre esse problema:

https://developer.mozilla.org/pt-BR/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Em alguns casos, o navegador continuará sugerindo valores de autocomplete mesmo que o atributo de preenchimento automático esteja desativado. Esse comportamento inesperado pode ser bastante intrigante para os desenvolvedores. O truque para realmente forçar a não-conclusão é atribuir uma string aleatória ao atributo

Então o seguinte código deve funcionar:

 autocomplete="nope" 

E assim deve cada um dos seguintes:

 autocomplete="false" autocomplete="foo" autocomplete="bar" 

O problema que vejo é que o agente do navegador pode ser inteligente o suficiente para aprender o atributo de autocomplete e aplicá-lo na próxima vez que vir o formulário. Se isso acontecer, a única maneira que posso ver para contornar o problema seria alterar dinamicamente o valor do atributo autocomplete quando a página é gerada.

Um ponto que vale a pena mencionar é que muitos navegadores ignoram as configurações de autocomplete para campos de login (nome de usuário e senha). Como o artigo da Mozilla afirma:

Por esse motivo, muitos navegadores modernos não suportam autocomplete = “off” para campos de login.

  • Se um site definir autocomplete = “off” para um formulário, e o formulário include campos de input de nome de usuário e senha, o navegador ainda se oferecerá para lembrar esse login e, se o usuário concordar, o navegador preencherá automaticamente esses campos na próxima vez em que usuário visita esta página.
  • Se um site definir autocomplete = “off” para campos de input de nome de usuário e senha, o navegador ainda se oferecerá para lembrar esse login e, se o usuário concordar, o navegador preencherá automaticamente esses campos na próxima vez que o usuário visitar essa página.

Esse é o comportamento no Firefox (desde a versão 38), no Google Chrome (desde 34) e no Internet Explorer (desde a versão 11).

Finalmente, uma pequena informação sobre se o atributo pertence ao elemento form ou ao elemento input . A especificação novamente tem a resposta:

Se o atributo autocomplete for omitido, o valor padrão correspondente ao estado do atributo de preenchimento automático do proprietário do formulário do elemento será usado no lugar (“on” ou “off”). Se não houver proprietário do formulário, o valor “on” será usado.

Assim. Colocá-lo no formulário deve se aplicar a todos os campos de input. Colocá-lo em um elemento individual deve se aplicar a apenas esse elemento (mesmo que não haja um no formulário). Se o autocomplete não for definido, o padrão será ativado.

Resumo

Para desativar o autocomplete em todo o formulário:

 

Ou se você precisar fazer isso dinamicamente:

 

Para desabilitar o autocomplete em um elemento individual (independentemente da configuração do formulário estar presente ou não)

  

Ou se você precisar fazer isso dinamicamente:

  

E lembre-se de que certos agentes do usuário podem replace até mesmo suas tentativas mais difíceis de desabilitar o autocomplete .

O navegador não se importa com autocomplete = off automático ou até mesmo preenche as credenciais com o campo de texto errado?

Eu corrigi-lo, definindo o campo de senha para somente leitura e ativá-lo, quando o usuário clica nele ou usa a tecla tab para este campo.

corrija o preenchimento automático do navegador em: somente leitura e defina o foco de gravação (ao clicar e clicar nos campos)

   

Atualização: Mobile Safari define o cursor no campo, mas não mostra o teclado virtual. A nova correção funciona como antes, mas lida com o teclado virtual:

  

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

// UpdateEnd

By the way, mais informações sobre a minha observação:

Às vezes, percebo esse comportamento estranho no Chrome e no Safari, quando há campos de senha no mesmo formulário. Eu acho, 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 input de 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, às vezes até autocomplete = off não impediria o preenchimento de credenciais em campos errados, mas não o campo de usuário ou apelido.

Você pode usar autocomplete="new-password"

   

Trabalha em:

  • Chrome: 53, 54, 55
  • Firefox: 48, 49, 50

para quem procura uma solução para isso, finalmente descubro.

O Chrome só obedece ao autocomplete = “off” se a página for uma página HTML5 (eu estava usando XHTML).

Eu converti minha página para HTML5 e o problema foi embora (facepalm).

Visto Chrome ignorar o autocomplete="off" , eu resolvê-lo com uma maneira estúpida que está usando “input falsa” para enganar cromo para preenchê-lo em vez de preencher o “real”.

Exemplo:

   

O Chrome preencherá a “input falsa” e, quando enviar, o servidor receberá o valor “input real”.

Estou postando esta resposta para trazer uma solução atualizada para este problema. Atualmente, estou usando o Chrome 49 e nenhum trabalho de resposta para esse. Eu também estou procurando uma solução trabalhando com outros navegadores e versões anteriores.

Coloque este código no começo do seu formulário

 

Então, para o seu campo de senha real, use

  

Comente esta resposta se isso não estiver mais funcionando ou se você tiver um problema com outro navegador ou versão.

Aprovado em:

  • Chrome: 49
  • Firefox: 44, 45
  • Edge: 25
  • Internet Explorer: 11

Até a última semana, as duas soluções abaixo funcionavam para o Chrome, o IE e o Firefox. Mas com o lançamento do Chrome versão 48 (e ainda em 49), eles não funcionam mais:

  1. O seguinte na parte superior do formulário:
   
  1. O seguinte no elemento de input de senha:

    autocomplete = “off”

Então, para corrigir isso rapidamente, primeiro tentei usar um grande truque para configurar inicialmente o elemento de input de senha como desativado e, em seguida, usei um setTimeout na function de pronto para documento para ativá-lo novamente.

 setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50); 

Mas isso pareceu tão louco e eu fiz mais algumas pesquisas e encontrei a resposta do @tibalts em Desativar o Preenchimento automático do Chrome . Sua resposta é usar autocomplete = “new-password” na input de senhas e isso parece funcionar em todos os navegadores (mantive meu número de correção 1 acima neste estágio).

Aqui está o link na discussão sobre o desenvolvedor do Google Chrome: https://code.google.com/p/chromium/issues/detail?id=370363#c7

Em vez de autocomplete = “off” use autocomplete = “false” 😉

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

autocomplete=off é amplamente ignorado em navegadores modernos – principalmente devido a gerenciadores de senhas etc.

Você pode tentar adicionar este autocomplete="new-password" não é totalmente suportado por todos os navegadores, mas funciona em alguns

A partir do Chrome 42, nenhuma das soluções / hacks neste tópico (a partir de 2015-05-21T12:50:23+00:00 ) funciona para desativar o preenchimento automático de um campo individual ou de todo o formulário.

EDIT: Eu descobri que você realmente só precisa inserir um campo de email fictício em seu formulário (você pode ocultá-lo com display: none ) antes dos outros campos para evitar o preenchimento automático. Presumo que o chrome armazene algum tipo de assinatura de formulário em cada campo preenchido automaticamente e que include outro campo de email corrompa essa assinatura e impede o preenchimento automático.

 

A boa notícia é que, como a “assinatura do formulário” está corrompida, nenhum dos campos é preenchido automaticamente, portanto, nenhum JS é necessário para limpar os campos falsos antes do envio.

Resposta antiga:

A única coisa que achei ainda viável é inserir dois campos fictícios do tipo email e senha antes dos campos reais. Você pode configurá-los para display: none para ocultá-los (não é inteligente o suficiente ignorar esses campos):

 

Infelizmente, os campos devem estar dentro do seu formulário (caso contrário, ambos os conjuntos de inputs são preenchidos automaticamente). Portanto, para que os campos falsos sejam realmente ignorados, você precisará de algum JS para ser executado no formulário, para eliminá-los:

 form.addEventListener('submit', function() { form.elements['fake_email'].value = ''; form.elements['fake_password'].value = ''; }); 

Observe acima que limpar o valor com Javascript funciona para replace o preenchimento automático. Portanto, se for aceitável perder o comportamento adequado com o JS desativado, você poderá simplificar tudo isso com um preenchimento automático “polyfill” do JS para o Chrome:

 (function(document) { function polyfillAutocomplete(nodes) { for(var i = 0, length = nodes.length; i < length; i++) { if(nodes[i].getAttribute('autocomplete') === 'off') { nodes[i].value = ''; } } } setTimeout(function() { polyfillAutocomplete(document.getElementsByTagName('input')); polyfillAutocomplete(document.getElementsByTagName('textarea')); }, 1); })(window.document); 

Após o chrome v. 34, definir autocomplete="off" na tag

não funciona

Eu fiz as alterações para evitar esse comportamento irritante:

  1. Remova o name e o id da input de senha
  2. Coloque uma class na input (ex .: passwordInput )

(Até agora, o Chrome não colocará a senha salva na input, mas o formulário agora está quebrado)

Por fim, para que o formulário funcione, coloque esse código para ser executado quando o usuário clicar no botão enviar ou sempre que você quiser acionar a submissão do formulário:

 var sI = $(".passwordInput")[0]; $(sI).attr("id", "password"); $(sI).attr("name", "password"); 

No meu caso, eu costumava ter id="password" name="password" na input de senha, então eu colocá-los de volta antes de acionar a apresentação.

Altere o atributo do tipo de input para type="search" .

O Google não aplica preenchimento automático a inputs com um tipo de pesquisa.

Acabei de atualizar para o Chrome 49 e a solução do Diogo Cid não funciona mais.

Eu fiz uma solução diferente escondendo e removendo os campos em tempo de execução após a página ser carregada.

O Chrome agora ignora a solução original que aplica as credenciais ao primeiro campo type="password" exibido e seu campo type="text" , por isso ocultei os dois campos usando visibility: hidden; CSS visibility: hidden;

  
.chromeHack-autocomplete { height: 0px !important; width: 0px !important; opacity: 0 !important; padding: 0 !important; margin: 0 !important; } jQuery(window).load(function() { $(".chromeHack-autocomplete").delay(100).hide(0, function() { $(this).remove(); }); });

Eu sei que isso pode parecer pouco elegante, mas funciona.

No Chrome 48+, use esta solução:

  1. Coloque campos falsos antes dos campos reais:

     
  2. Esconder campos falsos:

     .visually-hidden { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } 
  3. Você fez isso!

Também isso funcionará para versões mais antigas.

Embora eu concorde que o preenchimento automático deva ser uma escolha do usuário, há momentos em que o Chrome é zeloso demais com ele (outros navegadores também podem estar). Por exemplo, um campo de senha com um nome diferente ainda é preenchido automaticamente com uma senha salva e o campo anterior é preenchido com o nome de usuário. Isso é particularmente ruim quando o formulário é um formulário de gerenciamento de usuários para um aplicativo da Web e você não deseja que o preenchimento automático o preencha com suas próprias credenciais.

O Chrome ignora completamente o autocomplete = “off” agora. Embora os hacks do JS possam funcionar, encontrei uma maneira simples que funciona no momento em que escrevo:

Defina o valor do campo de senha para o caractere de controle 8 ( "\x08" em PHP ou  em HTML). Isso impede que o preenchimento automático do campo pelo Chrome tenha um valor, mas nenhum valor real é inserido porque esse é o caractere de retrocesso.

Sim, isso ainda é um truque, mas funciona para mim. YMMV.

Eu resolvi de outra maneira. Você pode tentar isso.

   

Depois de ter tentado todas as soluções, aqui está o que parece estar funcionando para a versão chrome: 45, com o formulário com o campo de senha:

  jQuery('document').ready(function(){ //For disabling Chrome Autocomplete jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000)); }); 

Eu encontrei esta solução para ser o mais adequado:

 function clearChromeAutocomplete() { // not possible, let's try: if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) { document.getElementById('adminForm').setAttribute('autocomplete', 'off'); setTimeout(function () { document.getElementById('adminForm').setAttribute('autocomplete', 'on'); }, 1500); } } 

Ele deve ser carregado depois de pronto, ou depois que o formulário for renderizado.

O truque de elemento de input oculto ainda parece funcionar (Chrome 43) para evitar o preenchimento automático, mas uma coisa é ter em mente que o Chrome tentará fazer o autopreenchimento com base na tag de espaço reservado. Você precisa coincidir o espaço reservado do elemento de input oculto com o da input que você está tentando desabilitar.

No meu caso, eu tinha um campo com um texto de espaço reservado de “Cidade ou zip”, que eu usava com o preenchimento automático do Google Place. Parece que ele estava tentando preencher automaticamente como se fosse parte de um formulário de endereço. O truque não funcionou até eu colocar o mesmo espaço reservado no elemento oculto como na input real:

   

Eu tive um problema semelhante em que o campo de input recebeu um nome ou um email. Eu configurei autocomplete = “off”, mas o Chrome ainda forçou sugestões. Acontece que foi porque o texto do espaço reservado tinha as palavras “nome” e “email”.

Por exemplo

  

Eu tenho em torno dele, colocando um espaço de largura zero para as palavras no espaço reservado. Não há mais autocomplete do Google Chrome.

  

Parece que isso está resolvido! Veja https://codereview.chromium.org/1473733008

Ao usar um widget como o Autocompletar da IU do jQuery, verifique se ele não está adicionando / alterando o atributo de preenchimento automático para desativado. Eu achei que isso seja verdade quando usá-lo e vai quebrar qualquer trabalho que você pode ter feito para replace qualquer cache de campo do navegador. Certifique-se de que você tenha um atributo de nome exclusivo e force um atributo de preenchimento automático exclusivo depois que o widget for inicializado. Veja abaixo algumas dicas sobre como isso pode funcionar para sua situação.

 < ?php $autocomplete = 'off_'.time(); ?>   

I’ve solved the endless fight with Google Chrome with the use of random characters.

  

Hope that it will help to other people.