O Chrome ignora o preenchimento automático = "desativado"


443

Eu criei um aplicativo Web que usa uma caixa de tags suspensa. Isso funciona muito bem em todos os navegadores, exceto no Chrome (versão 21.0.1180.89).

Apesar de ambos os inputcampos E o formcampo ter o autocomplete="off"atributo, o Chrome insiste em mostrar um histórico suspenso de entradas anteriores para o campo, o que está obliterando a lista de caixas de tags.


10
Tecnicamente, essa pergunta foi feita cerca de 5 meses antes da referência como "Esta pergunta já tem uma resposta aqui". Esse é o duplicado como veio depois deste.
user3071434

Respostas:


318

ATUALIZAR

Agora parece que o Chrome ignora os atributos style="display: none;"ou style="visibility: hidden;.

Você pode alterá-lo para algo como:

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

Na minha experiência, o Chrome apenas preenche automaticamente o primeiro <input type="password">e o anterior <input>. Então eu adicionei:

<input style="display:none">
<input type="password" style="display:none">

Para o topo da <form>e o caso foi resolvido.


54
isso não funciona mais chrome 40 não funciona esta solução
user881703

8
Isso não é apenas feio, mas ainda não consigo encontrar nenhuma explicação para a pergunta Por que?
Augustin Riedinger

4
Parece Chrome agora ignora-los se display: none é usado, então me mudei os campos fora da vista com posicionamento absoluto ...
Christoph Leiter

1
display: none;desaparecerá o elemento, nada sobre o preenchimento automático.
Sandun Perera

276

Impedir o preenchimento automático de nome de usuário (ou email) e senha:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

Impedir o preenchimento automático de um campo ( pode não funcionar ):

<input type="text" name="field" autocomplete="nope">

Explicação:

autocompleteainda funciona <input>apesar de ter autocomplete="off", mas você pode mudar offpara uma sequência aleatória, como nope.


Outras "soluções" para desativar o preenchimento automático de um campo (não é o caminho certo para fazê-lo, mas funciona):

1

HTML:

<input type="password" id="some_id" autocomplete="new-password">

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:

<form id="form"></form>

JS (onload):

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

ou usando jQuery:

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

Para adicionar mais de um campo usando o jQuery:

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>


Trabalha em:

  • Chrome: mais de 49

  • Firefox: mais de 44


Não há nenhum código, como é que a sua resposta realmente impedir autocomplete se autocomplete = "" é suposto apenas aceitar um booleano
Tallboy

autocomplete = "new-password" quando atribuído ao campo de senha, funcionou para mim no chrome. autocomplete = "off" no formulário não.
Second2None

2
O mais importante (e a única coisa que funcionou para mim) foi garantir absolutamente que a propriedade ID e Nome do campo <input> não contivesse "Nome de usuário" ou "Senha". Isso efetivamente interrompeu todo o preenchimento automático para mim no preenchimento automático = "off".
21819 Ghealele

new-passwordé uma boa captura para qualquer entrada oculta que na verdade não seja uma senha, obrigado
antongorodezkiy 29/04

Lol autocomplete="nope"realmente trabalhou para mim, a menos que eu o adicione nos meus campos de formulário. Como eu posso tê-lo em qualquer um dos campos e, em seguida, esse campo não será preenchido automaticamente, mas o outro campo ainda será preenchido automaticamente, mas assim que eu coloco nos dois campos, os dois começam a ser preenchidos novamente.
PrintlnParams

147

Parece que o Chrome agora ignora, a autocomplete="off"menos que esteja na <form autocomplete="off">etiqueta.


Para React, use 'autoComplete = off'.
zero_cool 31/03

Para obter uma explicação do motivo pelo qual o Chrome fez essa alteração, consulte esta resposta: stackoverflow.com/a/39689037/1766230 - Eles priorizam os usuários em vez dos desenvolvedores.
Luke

12
Se você deseja fornecer à equipe do Chrome motivos válidos para o uso do preenchimento automático = "desativado", faça-o aqui: bugs.chromium.org/p/chromium/issues/detail?id=587466
Chris

O @Digggid Chrome 71 não ignora o atributo, mas em alguns casos ignora o valor "off". Usar um valor como "país" ainda funciona para mim.
Burak

1
Apenas um esclarecimento sobre o exposto, pois existem relatórios conflitantes. Na tag de formulário, adicione autocomplete = "off" e nas tags de entrada individuais, adicione autocomplete = "new-password". Trabalhando no Chrome 75
AndyP9 30/09/19

83

Abordagem moderna

Simplesmente faça sua entrada readonlye, em foco, remova-a. Essa é uma abordagem muito simples e os navegadores não preencherão as readonlyentradas. Portanto, esse método é aceito e nunca será substituído por futuras atualizações do navegador.

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

A próxima parte é opcional. Estilize sua entrada de acordo para que não pareça uma readonlyentrada.

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

EXEMPLO DE TRABALHO


50
@ Basit - E foi por isso que chamei de a modern approach. Menos de 1% dos usuários no mundo tem o Javascript desativado. Portanto, honestamente, não vale a pena alguém acomodar um público tão pequeno quando a grande maioria dos sites confia no Javascript. Desenvolvo sites há muito tempo, e 100% dos meus sites usam Javascript e dependem muito dele. Se os usuários têm o Javascript desativado, isso é problema e escolha deles, não meu. Eles não poderão visitar ou usar pelo menos 90% dos sites on-line com ele desativado ... Seu voto negativo é completamente irrelevante.
Fizzix 04/11/2015

19
Hoje, isso não funciona em 49 anos. Os "desenvolvedores" do Chrome estão assistindo às soluções stackoverflow e removendo-as.
Puchu

7
Esta resposta de setembro de 2015 é basicamente uma cópia da resposta de novembro de 2014 abaixo.
dsuess

5
2019 - não funciona.
user2060451

1
Isso iria quebrar leitores de tela
Greg

80

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

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

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

Isso não funcionará com 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 obter mais detalhes.

UPDATE: Bug fechado como "Não será corrigido" pelo Chromium Team 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 Chrome realize o preenchimento automático.


2
@ Jonathan Cowley-Thom: tente estas páginas de teste que eu coloquei contendo minha solução alternativa. Em hub.securevideo.com/Support/AutocompleteOn , você verá sugestões de preenchimento automático do Chrome. Em seguida, tente as mesmas entradas em hub.securevideo.com/Support/AutocompleteOff . Você não deve ver sugestões de preenchimento automático do Chrome. Acabei de testar isso no Chrome 45.0.2454.101m e 46.0.2490.71m, e funcionou como esperado em ambos.
JT Taylor

Mais uma atualização sobre esse assunto: Acabei de receber uma notificação da equipe do Chrome de que isso foi corrigido. Portanto, esperamos que esta solução alternativa logo não seja mais necessária!
JT Taylor

Veja minha postagem acima: "Isso não funcionará com campos de senha - eles são tratados de maneira muito diferente no Chrome. Consulte code.google.com/p/chromium/issues/detail?id=468153 para obter mais detalhes."
JT Taylor

45

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

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

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

Portanto, no caso do Chrome, os desenvolvedores disseram essencialmente "deixaremos isso para o usuário decidir em suas preferências se ele deseja autocomplete ou não funcionar. Se você não quiser, não ative no seu navegador" .

No entanto, parece que isso é um pouco zeloso da parte deles, mas é assim que as coisas são. A especificação também discute as implicações potenciais de segurança de tal mudança:

A palavra-chave "off" indica que os dados de entrada 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 logon bancário) e, portanto, o usuário precisará digitar os dados explicitamente a cada vez, em vez de poder contar com o UA para pré-carregar 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 preenchimento automático.

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

Um artigo da Mozilla fala exatamente sobre esse problema:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

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 a não conclusão é atribuir uma sequência aleatória ao atributo

Portanto, 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 autocompleteatributo e aplicá-lo na próxima vez em que visualizar o formulário. Se isso acontecer, a única maneira de ver ainda para resolver o problema seria mudar dinamicamente oautocomplete valor atributo quando a página for gerada.

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

Por esse motivo, muitos navegadores modernos não oferecem suporte ao preenchimento automático = "desativado" nos campos de login.

  • Se um site definir autocomplete = "off" para um formulário, e o formulário incluir campos de nome de usuário e senha, o navegador ainda oferecerá a lembrança desse logon e, se o usuário concordar, o navegador preencherá esses campos automaticamente na próxima vez que o usuário visita esta página.
  • Se um site definir preenchimento automático = "desativado" para os campos de entrada de nome de usuário e senha, o navegador ainda oferecerá a lembrança desse logon e, se o usuário concordar, o navegador preencherá esses campos automaticamente na próxima vez que o usuário visitar esta 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, um pouco de informação sobre se o atributo pertence ao formelemento ou ao inputelemento. A especificação novamente tem a resposta:

Se o atributo de preenchimento automático for omitido, será utilizado o valor padrão correspondente ao estado do atributo de preenchimento automático do proprietário do formulário do elemento ("ativado" ou "desativado"). Se não houver proprietário do formulário, o valor "on" será usado.

Assim. Colocá-lo no formulário deve ser aplicado a todos os campos de entrada. Colocá-lo em um elemento individual deve ser aplicado apenas a esse elemento (mesmo se não houver um no formulário). Se autocompletenão estiver definido, o padrão éon .

Sumário

Para desativar autocompleteem todo o formulário:

<form autocomplete="off" ...>

Ou se você precisar fazer isso dinamicamente:

<form autocomplete="random-string" ...>

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

<input autocomplete="off" ...>

Ou se você precisar fazer isso dinamicamente:

<input autocomplete="random-string" ...>

E lembre-se de que certos agentes de usuários podem substituir até as tentativas mais difíceis de desativar autocomplete.


1
2019 - não funciona. Versão 76.0
user2060451

1
@ user2060451 - o que não funciona? Acabei de testar em 76.0.3809.87 no Windows e Mac. - ambos executam conforme as especificações. como descrito acima. Se você puder fornecer um pouco mais de descrição do que "não funciona", talvez eu possa ajudá-lo.
Hooligancat

1
Eu apenas tentei dar (do console depois de tudo carregado e configurá-lo no lado do servidor) uma sequência aleatória para o preenchimento automático do elemento de entrada, não funcionou. Dar autocomplete = "off" para formar o elemento também não funcionou.
Nuryagdy Mustapayev


29

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

Muita discussão sobre se isso é bom ou ruim? Qual é a sua opinião?


7
desculpe pelo voto negativo ... este não é um site de discussão (tente o quora) e você não fornece uma resposta. Obrigado pelo link embora.
### commonpike #

25

O navegador não se preocupa com o preenchimento automático = desativado automaticamente ou até preenche credenciais no campo de texto errado?

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

corrija o preenchimento automático do navegador: somente leitura e defina a escrita no foco (com o clique do mouse e tabulação nos campos)

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

Atualização: o Mobile Safari define o cursor no campo, mas não mostra o teclado virtual. Nova correção funciona como antes, mas lida com 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

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

À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, às vezes até o preenchimento automático = desativado não impediria o preenchimento de credenciais em campos incorretos, mas não no campo de usuário ou apelido.


2
em vez de usar o onfocus, eu uso um setTimeout para limpar o readonly, para que meus usuários não vejam que a entrada é somente leitura e nunca a foque!
precisa saber é o seguinte

23

Você pode usar autocomplete="new-password"

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

Trabalha em:

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

Isso não pode funcionar, porque a sequência de preenchimento automático é corrigida. Os navegadores lembrarão a nova senha da próxima vez.
etapa

23

TL; DR: informe ao Chrome que esta é uma nova entrada de senha e não fornecerá as antigas como sugestões de preenchimento automático:

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

autocomplete="off" não funciona devido a uma decisão de design - muitas pesquisas mostram que os usuários têm muito mais tempo e mais difícil para hackear senhas se puderem armazená-las em um navegador ou gerenciador de senhas.

A especificação de autocomplete mudou e agora suporta vários valores para facilitar o preenchimento automático de formulários de login:

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

Se você não fornecer essas informações, o Chrome ainda tenta adivinhar e, quando o faz, ignora autocomplete="off".

A solução é que autocompletetambém existem valores para os formulários de redefinição de senha:

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

Você pode usar esse autocomplete="new-password"sinalizador para dizer ao Chrome para não adivinhar a senha, mesmo que ela tenha uma armazenada para este site.

O Chrome também pode gerenciar senhas de sites diretamente usando a API de credenciais , que é um padrão e provavelmente terá suporte universal eventualmente.


5
Não é uma razão realmente convincente. O fato de o usuário querer algo não significa que seja uma ideia inteligente. Isso é quase tão ruim quanto dizer que você permitirá senhas de um caractere no seu aplicativo porque o usuário acha mais conveniente. Às vezes, a segurança supera a conveniência ...
Daniel Kotin

Eu tenho um campo chamado "ContactNoAlt" que o Chrome insiste em preencher com um EmailAddress. É preferível ativar / desativar o preenchimento automático, mas é necessária uma solução alternativa em um nível prático, pois o Chrome é falível. O preenchimento automático mais acentuado = "desativado" é um padrão - então, o que torna os desenvolvedores do Chrome tão bons que apenas sentem que podem ignorar os padrões - talvez um dia o Chrome decida que outro pedaço de HTML é inconveniente ... (isso está começando se sentir como IE5 / 6 de-ja-vu)
dunxz 03/08

Eu sou um usuário do Chrome e não quero esse comportamento. Ele nem me perguntou antes de preencher automaticamente a caixa de senha que estava sendo exibida para garantir que apenas eu pudesse acessar o aplicativo Web em questão. Salvar algumas senhas não deve significar o preenchimento automático de todas as senhas.
precisa saber é o seguinte

3
Esta resposta (e o comportamento do Google) ignora o fato de que uma das principais razões pelas quais você pode querer fazer isso é implementar seus próprios comportamentos de preenchimento automático (por exemplo, lista do banco de dados).
Squarelogic.hayden

você está tentando defender uma decisão claramente ruim tomada pelo chrome. Estou implementando a política da empresa que não posso mudar. Então agora eu tenho que inserir hacks para o chrome. Eles atualmente trabalham. Se eles deixarem de funcionar, nossa empresa mudará o navegador padrão para os funcionários. Portanto, agora temos o mesmo comportamento, mas com hacks e possivelmente páginas quebradas em futuras atualizações. E vendo todas essas respostas aqui, há muitos desenvolvedores usando esses hacks. Chrome bem feito.
Claudiu Creanga 02/02

23

Eu resolvi a luta sem fim com o Google Chrome com o uso de caracteres aleatórios. Quando você sempre processa o preenchimento automático com uma sequência aleatória, nunca se lembra de nada.

<input name="name" type="text" autocomplete="rutjfkde">

Espero que ajude a outras pessoas.


12

Autocomplete="Off" não funciona mais.

Tente usar apenas uma sequência aleatória em vez de "Off", por exemploAutocomplete="NoAutocomplete"

Espero que ajude.


5
Não funciona no Chrome 73
just_user 16/04/19

10

Visto que o chrome ignora autocomplete="off", eu o resolvo de uma maneira estúpida, que está usando a "entrada falsa" para enganar o chrome para preenchê-lo, em vez de preencher o "real".

Exemplo:

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

O Chrome preencherá a "entrada falsa" e, quando enviar, o servidor receberá o valor "entrada real".


10

Estou postando esta resposta para trazer uma solução atualizada para esse problema. Atualmente, estou usando o Chrome 49 e nenhuma resposta dada funciona para este. Também estou procurando uma solução para trabalhar com outros navegadores e versões anteriores.

Coloque este código no início do seu formulário

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

Em seguida, para o seu campo de senha real, use

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

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

Aprovado em:

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

1
Infelizmente, a versão 49.0.2623.87 do Chrome e não funciona para o TextBox, ainda vejo o preenchimento automático aparecendo.
eYe 31/03

8

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

O Chrome obedece apenas ao preenchimento automático = "desativado" se a página for uma página HTML5 (eu estava usando XHTML).

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


6

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

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


1
Vou downvote: testado em Chrome 60: esta autocomplete não impede ..
boly38

6

Até essa semana, as duas soluções abaixo pareciam funcionar no Chrome, IE e Firefox. Mas com o lançamento da versão 48 do Chrome (e ainda em 49), eles não funcionam mais:

  1. A seguir, na parte superior do formulário:
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>
  1. A seguir, no elemento de entrada da senha:

    autocomplete = "off"

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

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

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

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


@JorgeSampayo Funciona apenas em entradas de senha, mas não em entradas de texto.
eYe 31/03

6

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

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


6

autocomplete="off"geralmente está funcionando, mas nem sempre. Depende doname do campo de entrada. Nomes como "endereço", 'email', 'nome' - serão preenchidos automaticamente (os navegadores acham que ajudam os usuários), quando campos como "código", "alfinete" - não serão preenchidos automaticamente (se autocomplete="off"estiver definido)

Meus problemas eram - o preenchimento automático estava mexendo com o auxiliar de endereço do Google

Corrigi-o renomeando-o

de

<input type="text" name="address" autocomplete="off">

para

<input type="text" name="the_address" autocomplete="off">

Testado no chrome 71.


1
Acho que esta é a maneira mais recente de remover a conclusão automática. trabalhando em 2020 maio no chrome 81
NIKHIL CM


5

Não faço idéia por que isso funcionou no meu caso, mas no chrome eu usei autocomplete="none"e o Chrome parou de sugerir endereços para o meu campo de texto.


4

A partir do Chrome 42, nenhuma das soluções / hacks neste segmento (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: Descobri que você realmente só precisa inserir um campo de email fictício em seu formulário (você pode ocultá-lo display: none) antes dos outros campos para impedir o preenchimento automático. Presumo que o chrome armazene algum tipo de assinatura de formulário em cada campo preenchido automaticamente e a inclusão de outro campo de email corrompa essa assinatura e impede o preenchimento automático.

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

A boa notícia é que, como a "assinatura do formulário" é corrompida por isso, 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 viável ainda é inserir dois campos fictícios do tipo email e senha antes dos campos reais. Você pode configurá-los para display: noneocultá-los (não é inteligente o suficiente para ignorar esses campos):

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

Infelizmente, os campos devem estar no seu formulário (caso contrário, os dois conjuntos de entradas são preenchidos automaticamente). Portanto, para que os campos falsos sejam realmente ignorados, você precisará de algumas JS para executar no formulário, para limpá-las:

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

Observe acima que limpar o valor com Javascript funciona para substituir o preenchimento automático. Portanto, se perder o comportamento adequado com o JS desativado for aceitável, você poderá simplificar tudo isso com um "polyfill" de preenchimento automático 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);

4

Eu tive um problema semelhante em que o campo de entrada recebeu um nome ou um email. Defino o preenchimento automático = "desativado", mas o Chrome ainda força sugestões. Acontece que foi porque o texto do espaço reservado continha as palavras "nome" e "email".

Por exemplo

<input type="text" placeholder="name or email" autocomplete="off" />

Eu consegui contornar isso colocando um espaço de largura zero nas palavras no espaço reservado. Chega de preenchimento automático do Chrome.

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />

4

No Chrome 48 ou superior, use esta solução:

  1. Coloque campos falsos antes de campos reais:

    <form autocomplete="off">
      <input name="fake_email"    class="visually-hidden" type="text">
      <input name="fake_password" class="visually-hidden" type="password">
    
      <input autocomplete="off" name="email"    type="text">
      <input autocomplete="off" name="password" type="password">
    </form>
  2. Ocultar 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!

Além disso, isso funcionará para versões mais antigas.


@yivo Parece que a única diferença entre urs e og resposta são as tags! important, então eu as adicionei, ainda não funcionando. dropbox.com/s/24yaz6ut7ygkoql/...
Mike Purcell

@MikePurcell Você não tem autocomplete="off"a formetiqueta. Tente também colocar entradas falsas imediatamente após a formtag.
yivo

@ Yivo: Tentei suas sugestões, funcionou bem no campo de email, no entanto, o preenchimento automático ainda acontece no campo de senha. dropbox.com/s/5pm5hjtx1s7eqt3/...
Mike Purcell

3

Após o chrome v. 34, a configuração autocomplete="off"em <form>tag não funciona

Fiz as alterações para evitar esse comportamento irritante:

  1. Remova a entrada namee ida senha
  2. Coloque uma classe na entrada (ex .: passwordInput)

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

Por fim, para que o formulário funcione, coloque esse código em execução quando o usuário clicar no botão enviar ou sempre que desejar ativar o envio 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"a entrada de senha, então as coloquei de volta antes de acionar a submissão.


3

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

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

3

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

Fiz uma solução alternativa oculta e removendo os campos em tempo de execução após o carregamento da página.

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

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

Eu sei que pode não parecer muito elegante, mas funciona.


2

Eu achei esta solução a mais apropriada:

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 que o dom estiver pronto ou depois que o formulário for renderizado.


2

Embora eu concorde que o preenchimento automático deve ser uma opção do usuário, há momentos em que o Chrome é muito zeloso com ele (outros navegadores também podem ser). 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 de um aplicativo Web e você não deseja que o preenchimento automático o preencha com suas próprias credenciais.

O Chrome ignora completamente o preenchimento automático = "desativado" agora. Embora os hacks JS possam funcionar, encontrei uma maneira simples que funciona no momento em que escrevi:

Defina o valor do campo de senha como o caractere de controle 8 ( "\x08"em PHP ou &#8;HTML). Isso impede que o Chrome preencha automaticamente o campo porque ele possui um valor, mas nenhum valor real é inserido porque esse é o caractere de backspace.

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


Parece não funcionar no Chrome 40
capa

Eu acho que eles pegaram esse hack e ignoraram os caracteres de controle no valor, então agora ele é vazio. Veja a resposta em @ sorvete stackoverflow.com/a/16130452/752696 para obter a solução correta e atualizada.
Spikyjt 5/03

Mesmo caso de uso aqui: Trabalhando com gerenciamento de usuários e com credenciais próprias preenchidas automaticamente. No entanto, como é meu próprio código e reutilizo o formpara criar novos e editar usuários existentes, simplesmente substituindo inputvalores via JS removemos o preenchimento automático.
N15
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.