Desativando o preenchimento automático do Chrome


620

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?


6
Não é uma duplicata. Este alças incapacitantes o preenchimento automático, que um alças denominar a cor de preenchimento automático ...
Nicu Surdu

17
autocomplete = "false" em vez de autocomplete = "off" conforme a resposta de Kaszoni Ferencz, vote nele.
roughcoder

7
Veja o número de respostas para essa pergunta - ela deve lhe dizer uma coisa: você está travando uma batalha perdida. Isso não é mais um problema do Chrome, o Firefox e outros seguem o mesmo caminho. Goste ou não, você precisa aceitar a decisão do setor de navegadores, que o preenchimento automático é a escolha do usuário - você pode combatê-los, mas perderá. No final do dia, a pergunta que você deve fazer não é: como subverter o preenchimento automático, mas como criar formulários que funcionam bem com o preenchimento automático. Suas preocupações com segurança não são suas, mas os usuários.
mindplay.dk

21
Desculpe, mas a resposta do @ mindplay.dk é contraproducente. Minha situação é que tenho usuários que fizeram login no meu site e uma página no site é para eles inserirem informações de conta / senha para outros sistemas. Quando eu coloco um diálogo para que eles insiram um novo, as informações de logon do meu site são preenchidas, o que é completamente errado e causará problemas se / quando os usuários inserirem inadvertidamente essas informações. Os dois não têm nada a ver com entre si. Nesse caso, o navegador está fazendo algo contrário ao que o usuário deseja.
Mike K

8
@ mindplay.dk - Meu aplicativo Web é um aplicativo de gerenciamento de fluxo de trabalho para o local de trabalho, portanto, não, as preocupações com segurança são minhas, conforme exigido pela alta gerência e devem ser respeitadas por todos os funcionários, também conhecidos como "os usuários". " No entanto, solicitar que eles configurem o Chrome, IE ou qualquer outro navegador deixará lacunas no processo de autenticação, pois eles podem, intencionalmente ou não, acabar usando o preenchimento automático. Nem todos os aplicativos da Web são do mesmo tipo, com os mesmos tipos de usuários ou preocupações.
precisa saber é o seguinte

Respostas:


906

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.


115
'new-password' funcionou para mim depois de tentar 'off' e 'falso'
Kevin

26
Essa é a única correção de trabalho agora. Falso e desligado, não funciona mais. Agora deve ser a resposta correta.
David

5
O motivo disso funciona é porque a equipe do Chrome está tentando criar valores de preenchimento automático recomendados, como mostrado em developers.google.com/web/fundamentals/design-and-ui/input/… O valor "nova senha" é um dos poucos que possuem lógica adicional ao seu redor e, nesse caso, suspender o preenchimento automático, mas ainda permitir sugestões de preenchimento automático
Deminetix

30
Não funciona a partir de 1.13.2018 Versão 63.0.3239.132 (Compilação oficial) (64 bits)
PellucidWombat

37
Eu só queria dizer .. Depois de tropeçar nessa questão ... o Chrome é um trabalho real. Portanto, agora precisamos pular as etapas para desativar a funcionalidade que deveria permanecer opcional. Em que mundo o endereço seria preenchido automaticamente, será necessário em um aplicativo de negócios em que o endereço seja novo / diferente toda vez. O Google está se tornando tão ruim quanto a Microsoft.
Eddy Howard

700

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"


7
Eu tinha certeza de que isso funcionaria, pois você explicou perfeitamente o preenchimento automático heurístico que estou enfrentando com o campo de entrada antes da senha. Infelizmente, não funcionou para mim, coloquei autocomplete = "off" no formulário e em todas as entradas e elas ainda são preenchidas. A única solução que funcionou para mim está no link do goodeye acima. (colocando uma segunda entrada de tipo oculto = "senha" antes que a senha ative as verificações heurísticas do chrome)
parliament

19
Isso costumava funcionar bem, eu também o usava, mas desde uma atualização do Chrome há algum tempo (entre então e 5 de maio), o Chrome ignora a propriedade do formulário :(
Tominator

13
O Google tomou a decisão em (Chrome v34, eu acho) de fazer com que a política SEMPRE agora ignore autocomplete = "off", incluindo diretivas em nível de formulário ... isso seria bom se ele realmente acertasse os campos.
187 Jammer

10
tente autocomplete = "false" não autocomplete = "off"
roughcoder

243
Esse atributo também é necessário:autocomplete="I told you I wanted this off, Google. But you would not listen."
rybo111 13/06/2015

265

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>

8
Trabalhou para mim! Mas há uma observação importante: eu tenho 5 campos na minha página da web: Nome, Endereço, CEP, Telefone e E-mail. Quando incluí autocomplete = 'false' no formulário e no campo Nome, ele ainda funcionava. No entanto, quando incluí o preenchimento automático = 'false' também no campo Endereço, ele finalmente parou de preenchê-los automaticamente! Portanto, você precisa colocar a propriedade de preenchimento automático não no campo de login ou nome, mas também nos campos a seguir! (Trabalhou no Chrome 43.0.2357.81 a partir de 27/05/2015)
Dvd Franco

45
SE ISSO NÃO FUNCIONAR PARA VOCÊ: lembre-se de que há duas maneiras pelas quais o Chrome "ajuda" os usuários. O AUTOCOMPLETE solicitará com base no envio anterior no mesmo formulário preenchido e afetará as pessoas que estão usando o formulário mais de uma vez. O preenchimento automático está desativado com o preenchimento automático = "desativado". O Preenchimento automático será solicitado com base no catálogo de endereços de formulários semelhantes preenchidos anteriormente em outras páginas. Também destacará os campos que está mudando. O preenchimento automático pode ser desativado com o preenchimento automático = "false".
Genkilabs # 28/15

4
Isso não funciona para mim (versão 43.0.2357.124 m). Provavelmente essa foi uma supervisão do Google, que agora foi resolvida. Eles parecem estar pensando "o usuário está sempre certo", pois deseja preencher automaticamente tudo. O problema é que a minha ficha de inscrição salva os dados do usuário, assim como o formulário de login faz, que é mais definitivamente não o que o usuário quer ...
rybo111

3
YEP Funciona no Chrome 43.0.2357 !! esse comportamento no Chrome é tão irritante e essa solução demorou um pouco para descobrir. Obrigado pela sua resposta.
Adriano Rosa

3
não funciona com o Chrome 44.0.2403.157. Como esse recurso pode funcionar e não funcionar com versões diferentes. É ridículo #
611

120

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


12
que grande correção :) você deve substituir jquery com este: this.removeAttribute ( "class")
Roey

Eu usei isso para impedir que um dropdwonlist seja preenchido automaticamente. Mas também reestilizado apenas para que não parecesse. Idéia legal!
ComfortablyNumb

1
@Clint: meu trecho de código acima remove o atributo somente leitura assim que o usuário entra no campo (por clique do mouse ou tecla tab). Eu acho que você se refere a um campo que é protegido automaticamente pelo preenchimento , mas não é tocado pelo usuário. Qual é o objetivo deste campo - e ele realmente precisa ser protegido? Dependendo do cenário, a remoção de todos os atributos somente leitura no envio pode ser uma opção. Você pode adicionar um comentário mais específico ao seu problema? Talvez eu possa ajudá-lo :)
dsuess

1
Se você estiver usando JavaScript. por que não apenas definir o valor dummye removê-lo novamente? Adicionar e remover somente leitura soa como uma jogada perigosa - e se o navegador não quiser que você se concentre nela?
rybo111

1
Aparentemente, o Google está tentando tomar decisões para todos nós aqui, eles fecharam o ticket referente ao preenchimento automático = "desativado": bugs.chromium.org/p/chromium/issues/detail?id=468153 . Mas há outro ticket aberto para coletar casos de usuário válidos para desativar o preenchimento automático, responda este ticket para aumentar a conscientização sobre esse problema aqui: bugs.chromium.org/p/chromium/issues/detail?id=587466
Norman Xu

80

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


Sim! :) Obrigado! Isso funciona no Chrome 67.0.3396.99. (Acho que seu link deve ser: w3.org/wiki/HTML/Elements/input/search a partir de setembro de 2018).
Andy King

4
Finalmente! ainda funciona Versão 69.0.3497.100 (Compilação oficial) (64 bits) Essa deve ser a resposta real!
Venson 02/10/1918

1
todo mundo é certo e errado e ao mesmo tempo você deve escrever autocomplete = "off" dentro da tag <form autocomplete = "off"> vez na entrada e isso vai parar o comportamento de preenchimento automático
demopix

2
Também funciona se você definir autocomplete = "off" no formulário (para alterar essa forma de largura padrão) e, em seguida, só precisa digitar set = "search" no <input>
John

9
Após a versão 72.XX do Chrome, essa correção não funciona. Encontre o fixe mais recente aqui stackoverflow.com/a/55045439/1161998
Adheep Mohamed Abdul Kader

65

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.


1
Este funcionou para mim (por enquanto). Descobri que usei cerca de meia dúzia de hacks diferentes ao longo do tempo e, depois de um tempo, o Chrome decide que quer derrotar esse hack. Portanto, é necessário um novo, como este. No meu aplicativo, tenho um formulário de atualização de perfil com campos de email e senha que devem ser deixados em branco, a menos que o usuário queira fazer alterações. Porém, quando o Chrome é preenchido automaticamente, ele coloca o ID do usuário no campo "confirmação por email", resultando em todos os tipos de condições de erro, que levam a outras condições de erro, à medida que o usuário se atreve a tentar fazer a coisa certa.
21414 Jeffrey Simon

2
Uma rápida explicação sobre por que esse hack funciona (por enquanto): o Chrome vê a primeira entrada type = password e a preenche automaticamente e assume que o campo diretamente antes disso DEVE ser o campo userhame e preenche automaticamente esse campo com o nome de usuário. @ JeffreySimon, isso deve explicar o fenômeno da identificação do usuário no campo de confirmação de e-mail (eu estava vendo a mesma coisa no meu formulário).
MrBoJangles

1
@kentcdodds - não sei o que você quer dizer com não está mais funcionando. Seu jsbin não possui um campo de senha, portanto, é uma situação diferente. Uso essa solução há anos e, mais recentemente, notei que era necessária e funcionou para mim na semana passada (março de 2015).
Mike Nelson

1
Viva! Uma solução que parece funcionar! Eu recomendaria dar ao campo o nome passworde o nome actual_passworddo campo legítimo, como o Google agora parece estar olhando name. No entanto, isso significa que o Chrome não salvará a senha, que é a funcionalidade que eu realmente quero . AAAAARRRRGHH!
rybo111

2
Atualização: isso continua a funcionar por mais de um ano desde a última vez em que o implementei. Podemos ter um sólido vencedor aqui.
MrBoJangles

48

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.


Atualizei meu chrome e ainda funciona para mim. 50.0.2661.87 (64 bits)
Tauras

Infelizmente, ao enviar o formulário (ou quando os campos de entrada são ocultos / removidos), o Chrome pede para salvar o login alterado.
Sibbl

Funciona na versão 51.0.2704.79 m
Geoffrey Hale

caramba, por que isso funciona? isso é um bug? porque eu testei aqui e colocá-lo em apenas uma entrada e trabalhou tanto para o login de entrada e senha, mas eu colocá-lo apenas na senha
Leandro RR

Eu não faço ideia. Eu acho que é uma "coisa" cromada que foi feita pelos desenvolvedores. Talvez eu esteja enganado.
Tauras

46

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


Versão do @ArnoldRoa adicionada, está no nosso site desde o dia em que a publiquei e tinha poucas versões em que funcionava bem. Qual versão você está usando? PC / Mac?
Kuf

Não está funcionando no 57.0.2987.110. O Chrome destaca o amarelo e preencha o campo com a minha senha salva. Mas a página é uma página de gerenciamento de usuários, não uma página de login.

1
@ Dummy Eu testei agora no Chrome mais recente (57) e ainda está funcionando para mim. Você fez algo especial com os campos de entrada? cap você colocou seu código em algum lugar que eu poderia tentar reproduzir?
22417 Kuf

3
Versão 64.0.3282.186 (Compilação oficial) (64 bits) do Windows. 2018-03-01 NÃO FUNCIONA para desativar o preenchimento automático.
precisa

2
Certeza que isso remove o formulário / entrada de tecnologias assistivas w3c.github.io/using-aria/#ariapresentation
Olex Ponomarenko


19

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

    • 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

  1. 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;"/>

1
Ótimo trabalho, como você descobriu o algoritmo do Chrome? Acabei de descobrir que meu método antigo de alterar o valor com JS depois que a página foi carregada com um timer setTimeout não funciona mais. Mas isso funciona perfeito!

Infelizmente, não funciona para entradas regulares de TextBox.
eYe 31/03

1
na verdade, ele está trabalhando apenas definir a propriedade de nome;)
Fareed Alnamrouti

No Chrome 58, isso não funciona. Use largura: 1 px. Se o campo da senha estiver completamente oculto, o Chrome o preencherá normalmente. Também o z-index: -999 pode ser útil para não sobrepor nenhum conteúdo.
Cristiancastrodc

1
Funciona no Chrome 67.0 no componente html angular<form *ngIf="!loggedIn()" #loginForm="ngForm" class="navbar-form navbar-right" (ngSubmit)="login()"><input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/><input type="text" #username="ngModel" placeholder="Username" class="form-control" required autocomplete="off" name="username" [(ngModel)]="model.username"><input type="password" #password="ngModel" placeholder="Password" class="form-control" required autocomplete="off" name="password" [(ngModel)]="model.password">...
Junior Mayhé 20/07/18

19

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 your@email.com) 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="your@email.com">
<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.


@ Vaia - você tentou navegar para outra página e pressionar o botão Voltar? Eu obtenho resultados variados - pode precisar de ajustes.
rybo111

Eu não tentei a opção 1 se você quis dizer isso. Além disso, eu só precisava desativar o preenchimento automático em um modal carregado com ajax que não será chamado com o botão Voltar. Mas se houver outros resultados, eu vou lhe dizer. @ rybo111
AlexioVay

@ Vaia, eu quis dizer a opção 2 - responda aqui se tiver algum problema. Obrigado.
rybo111

15

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

melhor abordagem que encontrei até agora! bem, pelo menos para o Chrome 64: /
scipper 01/02

Para meus propósitos, isso é perfeito, obrigado! O Chrome não preenche ou preenche automaticamente, não se oferece para salvá-lo e não apenas é obscurecido de vista, mas também da área de transferência - copiei o que havia digitado e colei no bloco de notas e obtive "••• •••••••• ". Brilhante!
Doug McLean

15

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"

RE: 'comportamento inesperado' Esse comportamento é promovido pelo Google, que acredita que sabe melhor do que os desenvolvedores como cada página deve funcionar. Às vezes, eu só quero uma entrada de senha bruta, zero frescura.
Regular Joe

3
essa combinação FINALMENTE funcionou para mim: role = "presentation" autocomplete = "nope" testado na versão 64.0.3282.186 do Chrome (versão oficial) (64 bits). Que pesadelo!
precisa

2
A sequência aleatória funciona para chrome, mas não para o firefox. Para completar, uso "autocomplete = 'off-no-complete'" e defino o atributo readonly com um onfocus = "this.readOnly = false". Meu aplicativo é um aplicativo corporativo que os usuários usam para inserir milhares de endereços; portanto, o caso de uso para controlar isso é real - também posso garantir o uso de Javascript, pelo menos tenho isso a meu
favor

13

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.


Não é realmente o fato de você dizer PreventChromeAutocomplete. Consegui que o autocomplete funcionasse dizendo autocomplete = "off" e name = "somename". Mas isso só funciona se você nomear duas entradas diferentes com o mesmo nome. Portanto, no seu caso, o PreventChromeAutocomplete deve ter sido aplicado a duas entradas diferentes. Muito estranho ...
Joe Heyming

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

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


Esta solução funciona em campos de texto
Denis Slonovschi 08/03/19

9

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

Infelizmente, isso se aplica a mais do que apenas coisas de nome de usuário / senha. O Chrome examinará o texto do espaço reservado para inferir o que sugerir. Por exemplo: jsbin.com/jacizu/2/edit
kentcdodds

É válido que você ainda consiga preencher os campos com sugestões de navegador, como demonstra o seu exemplo, para que isso realmente não resolva o problema dos OPs. Essa solução apenas impede que o navegador preencha "automaticamente" combinações de nome de usuário e senhas, como no exemplo da resposta principal. Isso pode ser útil para alguns, mas não é uma solução completa para desativar o preenchimento automático, que precisará vir do Google.
Bernesto 21/03/2015

4
Embora, se você adicionar um espaço na frente do texto do espaço reservado, ele também desativará a sugestão automática com base no espaço reservado. Definitivamente um truque, embora não mais do que as outras sugestões. jsbin.com/pujasu/1/edit
Bernesto 21/03

na verdade ... ele parecia estar a trabalhar para o seu exemplo, mas por alguma razão ele não está funcionando para mim :-(
kentcdodds

Ha! É por isso que é chamado de hack ... Você tem um exemplo que pode compartilhar onde não está funcionando?
Bernesto 21/03/2015

8

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 junho de 2016 e no Chrome 51.0.2704.106 m, esta é a única solução funcional por aqui
Denis

Mas o formulário selecionará o campo de entrada correto (visível) que você precisa? Porque é o mesmo nome.
AlexioVay

@ Vaia, adicionar o atributo desativado ao elemento duplicado impedirá que ele seja enviado.
Mcainz # 13/16

8

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>

4
Como sua resposta é a mais recente, você poderia adicionar que adicionar autocomplete="pineapple"ou alguma outra tagarelice também parece resolver o problema? Pelo menos, aconteceu do meu lado!
Douwe de Haan

1
@DouwedeHaan, tudo bem até que o formulário seja salvo, o preenchimento automático fornecerá recomendações para o campo 'abacaxi' salvo. Mas talvez usar um hash aleatório para o valor de preenchimento automático, por exemplo, contornar isso?
digout 7/01/19

@digout Eu concordo. Um bom exemplo seria usar o UUID para esse tipo de coisa. Apenas certifique-se de que a string seja única!
Douwe de Haan

7

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/


Esta é a única solução que realmente funciona. Eu realmente não gosto dele, mas isso é o estado miserável em que estamos agora :-(
kentcdodds

A partir de 2017, este ainda funcionará bem. Ele só precisa desse script para forçar o inputfoco se o usuário clicar no espaço reservado "falso": $("label").on("click",function(){ $(this).prev().focus(); });observe que isso labelnão pode acontecer antes do input... Chrome o encontrar! Boa solução criativa! +1
Louys Patrice Bessette /

7

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


1
Infelizmente, isso não funciona mais :-( jsbin.com/sobise/edit?html,css,output
kentcdodds 20/15

7

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.


Eu te amo. A única solução nesta página que realmente funciona.
Dia Davis Waterbury

Não funciona no ano de 2020.
Kai Noack 18/03

7

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


6

Experimente o seguinte jQuerycódigo que funcionou para mim.

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

soluções impressionantes incríveis
DKR

Você pode simplesmente adicionar autocomplete="off"ao campo de entrada em vez de usar o jquery. E, a propósito, isso não funciona. As sugestões de senha do Chrome ainda estão aparecendo.
Kai Noack 18/03

6

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.


A primeira parte desta resposta não parece não ser mais verdadeiro: Bug Chrome
Joshua Drake

Não tenho certeza do que você está falando. Esse "bug" é apenas um espaço reservado para o Chromium coletar os casos de uso das pessoas autocomplete="off". É possível que a intenção seja removê-lo, mas isso nunca é explicitamente declarado, e certamente não há nada que exija esse salto mental. Eles podem apenas querer considerar maneiras alternativas ou melhores de tratá-lo. Independentemente disso, ainda faz parte da especificação e, novamente, nenhuma indicação de que ela também será abandonada. E ainda funciona em todos os navegadores, até onde eu saiba, incluindo o Chrome.
22619 Chris Pratt

Temos alguns casos em que o preenchimento automático = "desativado" não está sendo respeitado pelo Chrome.
21719 Joshua Drake

1. Alguns casos anedóticos não são provas. 2. Como eu disse na minha resposta, extensões de preenchimento de formulários e similares podem e não respeitam isso. Por fim, como todas as coisas, cabe ao cliente e, portanto, ao usuário. Tudo o que você pode fazer é sugerir que não seja preenchido automaticamente.
22819 Chris Pratt


6

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

insira a descrição da imagem aqui

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


5

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>

5

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.


Obrigado! Essa é a única coisa que funciona no chrome 49. Os métodos anteriores foram interrompidos porque o chrome parece preencher todas as entradas type="password"agora.
epelc 6/03/16

4

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

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

4

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

correção estranho, mas de alguma forma isso é a única coisa que funciona para mim no Chrome 48 :)
Jacka
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.