Como você desativa o preenchimento automático do navegador no campo/tag de entrada do formulário da web?

StackOverflow https://stackoverflow.com/questions/2530

  •  08-06-2019
  •  | 
  •  

Pergunta

Como você desabilita autocomplete nos principais navegadores para um determinado input (ou form field)?

Foi útil?

Solução

Firefox 30 ignora autocomplete="off" para senhas, optando por perguntar ao usuário se a senha deve ser armazenada no cliente.Observe o seguinte comentário de 5 de maio de 2014:

  • O gerenciador de senhas sempre pergunta se deseja salvar uma senha.As senhas não são salvas sem a permissão do usuário.
  • Somos o terceiro navegador a implementar essa mudança, depois do IE e do Chrome.

De acordo com Rede de Desenvolvedores Mozilla documentação, o atributo do elemento de formulário booleano autocomplete evita que os dados do formulário sejam armazenados em cache em navegadores mais antigos.

<input type="text" name="foo" autocomplete="off" />

Outras dicas

Além de autocomplete=off, você também pode fazer com que os nomes dos campos do formulário sejam randomizados pelo código que gera a página, talvez adicionando alguma string específica da sessão ao final dos nomes.

Quando o formulário é enviado, você pode retirar essa parte antes de processá-lo no servidor.Isso impediria que o navegador da Web encontrasse contexto para o seu campo e também poderia ajudar a prevenir ataques XSRF porque um invasor não seria capaz de adivinhar os nomes dos campos para o envio de um formulário.

A maioria dos principais navegadores e gerenciadores de senhas (corretamente, IMHO) agora ignora autocomplete=off.

Por que?Muitos bancos e outros sites de "alta segurança" adicionados autocomplete=off às suas páginas de login "para fins de segurança", mas isso na verdade diminui a segurança, pois faz com que as pessoas alterem as senhas nesses sites de alta segurança para serem fáceis de lembrar (e, portanto, quebrar), já que o preenchimento automático foi quebrado.

Há muito tempo, a maioria dos gerenciadores de senhas começou a ignorar autocomplete=off, e agora os navegadores estão começando a fazer o mesmo apenas para entradas de nome de usuário/senha.

Infelizmente, bugs nas implementações de preenchimento automático inserem informações de nome de usuário e/ou senha em campos de formulário inadequados, causando erros de validação de formulário ou, pior ainda, inserindo acidentalmente nomes de usuário em campos que foram intencionalmente deixados em branco pelo usuário.

O que um desenvolvedor web deve fazer?

  • Se você puder manter todos os campos de senha em uma página sozinhos, será um ótimo começo, pois parece que a presença de um campo de senha é o principal gatilho para o preenchimento automático do usuário/senha ser ativado.Caso contrário, leia as dicas abaixo.
  • Safári observa que existem 2 campos de senha e desativa o preenchimento automático neste caso, assumindo que deve ser um formulário de alteração de senha, não um formulário de login.Portanto, certifique-se de usar 2 campos de senha (novo e confirmação de novo) para todos os formulários onde você permitir
  • cromada 34, infelizmente, tentará preencher automaticamente os campos com usuário/senha sempre que encontrar um campo de senha.Este é um bug bastante grave que, esperançosamente, mudará o comportamento do Safari.No entanto, adicionar isto ao topo do seu formulário parece desabilitar o preenchimento automático de senha:

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

Ainda não investiguei completamente o IE ou o Firefox, mas ficarei feliz em atualizar a resposta se outras pessoas tiverem informações nos comentários.

Às vezes mesmo preenchimento automático = desativado seria não impedir de preencher nas credenciais em campos errados, mas não no campo de usuário ou apelido.

Esta solução alternativa é um acréscimo à postagem do apinstein sobre o comportamento do navegador.

corrigir o preenchimento automático do navegador em somente leitura e definir gravável em foco (clique e tabulação)

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

Atualizar:Mobile Safari coloca cursor no campo, mas não mostra teclado virtual.A nova correção 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/

//AtualizaçãoFim

Porque o navegador preenche automaticamente as credenciais no campo de texto errado!?

Percebo esse comportamento estranho no Chrome e no Safari, quando há campos de senha em a mesma forma. Acho que o navegador procura um campo de senha para inserir suas credenciais salvas.Em seguida, ele preenche automaticamente (apenas adivinhando devido à observação) o campo de entrada semelhante a texto mais próximo, que aparece antes do campo de senha no DOM.Como o navegador é a última instância e você não pode controlá-lo,

Esta correção somente leitura acima funcionou para mim.

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

Isso funcionará no Internet Explorer e no Mozilla FireFox, a desvantagem é que não é o padrão XHTML.

A solução para o Chrome é adicionar autocomplete="new-password" para a senha do tipo de entrada.

Exemplo:

<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>

O Chrome sempre preenche automaticamente os dados se encontrar uma caixa de digite a senha, apenas o suficiente para indicar para aquela caixa autocomplete = "new-password".

Isto funciona bem para mim.

Observação:certifique-se com F12 que suas alterações surtiram efeito, muitas vezes os navegadores salvam a página em cache, isso me deu uma má impressão de que não funcionou, mas o navegador não trouxe de fato as alterações.

Como outros já disseram, a resposta é autocomplete="off"

No entanto, acho que vale a pena afirmar por que é uma boa ideia usar isso em certos casos como algumas respostas para isso e duplicado perguntas sugeriram que é melhor não desligá-lo.

Impedir que os navegadores armazenem números de cartão de crédito não deve ser uma responsabilidade dos usuários.Muitos usuários nem perceberão que isso é um problema.

É particularmente importante desativá-lo nos campos dos códigos de segurança do cartão de crédito.Como esta página afirma:

"Nunca guarde o código de segurança...o seu valor depende da presunção de que a única forma de o fornecer é através da leitura do cartão de crédito físico, comprovando que quem o fornece é efectivamente titular do cartão."

O problema é que, se for um computador público (cyber café, biblioteca, etc.), é fácil para outros usuários roubarem os detalhes do seu cartão e, mesmo na sua própria máquina, um site malicioso pode roubar dados de preenchimento automático.

Eu teria que discordar das respostas que dizem para evitar a desativação do preenchimento automático.

A primeira coisa a mencionar é que o preenchimento automático não desabilitado explicitamente nos campos do formulário de login é uma falha do PCI-DSS.Além disso, se a máquina local de um usuário for comprometida, qualquer dado de preenchimento automático poderá ser obtido trivialmente por um invasor, pois será armazenado de forma transparente.

Certamente há um argumento a favor da usabilidade, no entanto, há um equilíbrio muito delicado quando se trata de quais campos do formulário devem ter o preenchimento automático desativado e quais não devem.

Três opções:Primeiro:

<input type='text' autocomplete='off' />

Segundo:

<form action='' autocomplete='off'>

Terceiro (código javascript):

$('input').attr('autocomplete', 'off');

Resolvi a briga sem fim com o Google Chrome com o uso de caracteres aleatórios.Quando você sempre renderiza o preenchimento automático com uma string aleatória, ele nunca se lembrará de nada.

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

Espero que ajude outras pessoas.

Em um tom relacionado ou, na verdade, em uma nota completamente oposta -

"Se você é o usuário do formulário acima mencionado e deseja reativar a funcionalidade de preenchimento automático, use o Bookmarklet 'Lembre-se de senha' deste Página de favoritos.Ele remove tudo autocomplete="off" atributos de todos os formulários na página.Continue lutando contra a boa luta! "

Nós realmente usamos sasbideia para um site.Era um aplicativo da web de software médico para administrar um consultório médico.No entanto, muitos de nossos clientes eram cirurgiões que usavam diversas estações de trabalho, incluindo terminais semipúblicos.Então, eles queriam ter certeza de que um médico que não entendesse as implicações das senhas salvas automaticamente ou que não estivesse prestando atenção não pudesse acidentalmente deixar suas informações de login facilmente acessíveis.Claro, isso foi antes da ideia de navegação privada que começa a aparecer no IE8, FF3.1, etc.Mesmo assim, muitos médicos são forçados a usar navegadores antigos em hospitais com TI que não mudará.

Então, fizemos com que a página de login gerasse nomes de campos aleatórios que funcionariam apenas para aquela postagem.Sim, é menos conveniente, mas é apenas um golpe na cabeça do usuário por não armazenar informações de login em terminais públicos.

Basta definir autocomplete="off".Há uma boa razão para fazer isso:Você deseja fornecer sua própria funcionalidade de preenchimento automático!

Tenho tentado inúmeras soluções e encontrei isto:

Em vez de autocomplete="off" simplesmente use autocomplete="false"

Tão simples quanto isso e funciona perfeitamente no Google Chrome também!

Eu penso autocomplete=off é compatível com HTML 5.

Pergunte a si mesmo por que deseja fazer isso - pode fazer sentido em algumas situações, mas não faça isso apenas por fazer.

É menos conveniente para os usuários e nem mesmo é um problema de segurança no OS X (mencionado por Soren abaixo).Se você está preocupado com o fato de as pessoas terem suas senhas roubadas remotamente - um registrador de pressionamento de tecla ainda pode fazer isso, mesmo que seu aplicativo use autcomplete=off.

Como um usuário que escolhe ter um navegador para lembrar (a maior parte) das minhas informações, acharia irritante se o seu site não se lembrasse das minhas.

Nenhuma das soluções funcionou para mim nesta conversa.

Eu finalmente descobri um solução HTML puro isso requere sem Javascript, funciona em navegadores modernos (exceto IE;era necessário pelo menos um problema, certo?) e não exige que você desative o preenchimento automático para todo o formulário.

Basta desativar o preenchimento automático no form e, em seguida, ligue-o para qualquer input você deseja que funcione dentro do formulário.Por exemplo:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

Era uma maneira fora do padrão de fazer isso (acho que o Mozilla e o Internet Explorer ainda suportam), mas mexer com as expectativas dos usuários é uma má ideia.

Se o usuário inserir os dados do cartão de crédito em um formulário e permitir que outra pessoa use esse navegador, isso não será da sua conta.:)

Isso funciona para mim.

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

Também podemos usar essa estratégia em outros controles como texto, seleção etc.

Um pouco atrasado para o jogo... mas acabei de me deparar com esse problema e tentei várias falhas, mas esta funciona para mim, encontrada em MDN

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

autocomplete="nope"

A melhor solução:

Impedir o preenchimento automático de nome de usuário (ou e-mail) 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:

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

Explicação:autocomplete continua trabalhando em <input>, autocomplete="off" não funciona, mas você pode mudar off para uma string aleatória, como nope.

Trabalha em:

  • Cromada:49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 e 64

  • Raposa de fogo:44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 e 58

Adicionando o

autocomplete="off"

à tag do formulário desativará o preenchimento automático do navegador (o que foi digitado anteriormente nesse campo) de todos input campos dentro desse formulário específico.

Testado em:

  • Raposa de fogo 3.5, 4 BETA
  • Internet Explorer 8
  • cromada

Tente adicionar

readonly onfocus="this.removeAttribute('readonly');"

além de

preenchimento automático = "desligado"

para a(s) entrada(s) que você não deseja lembrar dos dados do formulário (username, password, etc.) conforme mostrado abaixo:

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

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >


Atualizar: Aqui está um exemplo completo abaixo com base nesta abordagem que impede arraste e solte, cópia de, colar, etc.

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

Testado nas versões mais recentes dos principais navegadores, ou seja, Google Chrome, Mozilla Firefox, Microsoft Edge, etc.e funcionando sem nenhum problema.Espero que isto ajude...

Use um nome e ID não padrão para os campos, portanto, em vez de "nome", tenha "nome_".Os navegadores não o verão como sendo o campo de nome.A melhor parte é que você pode fazer isso com alguns, mas não com todos os campos, e alguns campos serão preenchidos automaticamente, mas não com todos.

Para evitar o XHTML inválido você pode definir este atributo usando javascript.Exemplo usando jQuery:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

O problema é que os usuários sem javascript obterão a funcionalidade de preenchimento automático.

Adicionando autocomplete="off" não vai cortar.

Altere o atributo de tipo de entrada para type="search".
O Google não aplica preenchimento automático a entradas com um tipo de pesquisa.

tente isso também se apenas autocomplete="off" não funciona:

autocorrect="off" autocapitalize="off" autocomplete="off"

Não posso acreditar que isso ainda seja um problema tanto tempo depois de ter sido relatado.As soluções acima não funcionaram para mim, pois o safari parecia saber quando o elemento não estava exibido ou fora da tela, mas o seguinte funcionou para mim:

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

Espero que seja útil para alguém!

Este é um problema de segurança que os navegadores ignoram agora.Os navegadores identificam e armazenam conteúdo usando nomes de entrada, mesmo que os desenvolvedores considerem que as informações são confidenciais e não devem ser armazenadas.Tornar um nome de entrada diferente entre 2 solicitações resolverá o problema (mas ainda será salvo no cache do navegador e também aumentará o cache do navegador).Pedir ao usuário para ativar ou desativar opções nas configurações do navegador não é uma boa solução.O problema pode ser corrigido no back-end.

Aqui está minha solução.Uma abordagem que implementei em minha estrutura.Todos os elementos de preenchimento automático são gerados com uma entrada oculta como esta:

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

O servidor então processa variáveis ​​de postagem como esta:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

O valor pode ser acessado normalmente

var_dump($_POST['username']);

E o navegador não poderá sugerir informações da solicitação anterior ou de usuários anteriores.

Tudo funciona perfeitamente, mesmo que os navegadores sejam atualizados, queiram ignorar o preenchimento automático ou não.Essa foi a melhor maneira de resolver o problema para mim.

Nenhum dos hacks mencionados aqui funcionou para mim no Chrome.Há uma discussão sobre o assunto aqui: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Adicionando isso dentro de um <form> funciona (pelo menos por enquanto):

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

Então aqui está:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}
<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top