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

Como você desativa autocompletenos principais navegadores de um input(ou form field) específico ?

O Firefox 30 ignora as autocomplete="off"senhas, optando por solicitar 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.
• Nós somos o terceiro navegador a implementar essa alteração, depois do IE e do Chrome.

De acordo com a documentação da Mozilla Developer Network , o atributo Boolean do elemento do autocompleteformulário impede que os dados do formulário sejam armazenados em cache em navegadores mais antigos.

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

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

Quando o formulário é enviado, você pode retirar essa parte antes de processá-las no lado do servidor. Isso impediria que o navegador da Web encontrasse contexto para o seu campo e também ajudaria a impedir 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 ignoram autocomplete=off.

Por quê? Muitos bancos e outros sites de "alta segurança" foram 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) desde que o preenchimento automático estava quebrado.

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

Infelizmente, os 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ários em campos que foram intencionalmente deixados em branco pelo usuário.

O que um desenvolvedor da Web deve fazer?

• Se você pode manter todos os campos de senha em uma página por si mesmos, é um ótimo começo, pois parece que a presença de um campo de senha é o principal gatilho para o usuário / senha executar o preenchimento automático. Caso contrário, leia as dicas abaixo.
• O Safari percebe que existem 2 campos de senha e desabilita o preenchimento automático nesse caso, supondo que seja um formulário de alteração de senha, não um formulário de login. Portanto, certifique-se de usar 2 campos de senha (novos e confirmar novos) para todos os formulários em que você permitir

• Infelizmente, o Chrome 34 tentará preencher automaticamente os campos com user / pass sempre que vir um campo de senha. Este é um bug muito ruim que, esperançosamente, eles mudarão o comportamento do Safari. No entanto, adicionar isso à parte superior do formulário parece desativar o preenchimento automático de senha:

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

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

Às vezes até mesmo autocomplete = off que não impede a preencher em credenciais em campos errados, mas não do usuário ou o campo apelido.

Esta solução alternativa é uma postagem da apinstein sobre o comportamento do navegador.

corrija o preenchimento automático do navegador em somente leitura e defina o gravável em foco (clique e guia)

 <input type="password" readonly  
     onfocus="this.removeAttribute('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

Como o navegador preenche automaticamente as credenciais para o campo de texto errado !?

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

Essa correção somente de 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, mas o lado negativo é que não é padrão XHTML.

A solução para o Chrome é adicionar autocomplete="new-password" à senha do tipo de entrada. Por favor, verifique o exemplo abaixo.

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 do tipo senha , apenas o suficiente para indicar essa caixa autocomplete = "new-password".

Isto funciona bem para mim.

Nota: verifique com F12 que suas alterações entrem em vigor, muitas vezes os navegadores salvam a página no cache, isso me deu uma má impressão de que não funcionou, mas o navegador não trouxe as alterações.

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

No entanto, acho que vale a pena afirmar por que é uma boa ideia usá-lo em certos casos, pois algumas respostas a ele são duplicadas perguntas sugerem que é melhor não desativá-lo.

A interrupção de navegadores que armazenam números de cartão de crédito não deve ser deixada para os usuários. Muitos usuários nem percebem que é um problema.

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

"Nunca guarde o código de segurança ... seu valor depende da suposição de que a única maneira de fornecê-lo é lê-lo no cartão de crédito físico, provando que a pessoa que o fornece realmente segura o cartão".

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

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, ele nunca se lembra de nada.

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

Espero que ajude a outras pessoas.

Eu teria que implorar para diferir com as respostas que dizem para evitar a desativação do preenchimento automático.

A primeira coisa a destacar é que o preenchimento automático que não está explicitamente desativado nos campos do formulário de logon é uma falha do PCI-DSS. Além disso, se a máquina local de um usuário estiver comprometida, qualquer dado de preenchimento automático poderá ser obtido trivialmente por um invasor, devido ao fato de ele estar armazenado em claro.

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

Três opções: Primeira:

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

Segundo:

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

Terceiro (código javascript):

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

Em um relacionado ou, na verdade, na nota completamente oposta -

"Se você é o usuário do formulário mencionado acima e deseja reativar a funcionalidade de preenchimento automático, use o bookmarklet 'lembrar senha' nesta página de bookmarklets . Ele remove todos os autocomplete="off"atributos de todos os formulários da página. Continue lutando pela boa luta! "

Na verdade, usamos a ideia de sasb 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 muitas estações de trabalho diferentes, incluindo terminais semi-públicos. Portanto, eles queriam ter certeza de que um médico que não entende as implicações das senhas salvas automaticamente ou não está prestando atenção não pode acidentalmente deixar suas informações de login facilmente acessíveis. Obviamente, isso foi antes da idéia de navegação privada que está começando a aparecer no IE8, FF3.1, etc. Mesmo assim, muitos médicos são obrigados a usar navegadores da velha escola em hospitais com TI que não mudam.

Portanto, tivemos a página de login para gerar nomes de campos aleatórios que funcionariam apenas para essa postagem. Sim, é menos conveniente, mas é apenas um incômodo para o usuário sobre o armazenamento de informações de login em terminais públicos.

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

Finalmente, descobri uma solução HTML pura que não requer Javascript , funciona em navegadores modernos (exceto o IE; havia pelo menos 1 captura, certo?) E não exige que você desabilite o preenchimento automático para todo o formulário.

Simplesmente desative o preenchimento automático forme, em seguida, ligue-o para qualquer um inputque desejar que ele funcione no 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>

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

Eu tenho tentado soluções infinitas, e então eu encontrei isto:

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

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

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.

Eu acho que autocomplete=offé suportado no HTML 5.

No entanto, pergunte a si mesmo por que deseja fazer isso - pode fazer sentido em algumas situações, mas não faça isso apenas para fazê-lo.

É 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 as pessoas que roubam suas senhas remotamente - um registrador de pressionamento de tecla ainda pode fazer isso, mesmo que seu aplicativo use autcomplete=off.

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

Além de

autocomplete="off"

Usar

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

para as entradas que você não quer que eles se lembrem de dados do formulário ( username, password, etc.) como 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');" >

Espero que isto ajude.

A melhor solução:

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

<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: autocompletecontinua trabalhando em <input>, autocomplete="off"não funciona, mas você pode alterar offpara uma sequência aleatória, como nope.

Trabalha em:

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

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

Um pouco atrasado para o jogo ... mas acabei de encontrar este problema e tentei várias falhas, mas este funciona para mim, encontrado no MDN

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 da seguinte maneira:

autocomplete="nope"

Adicionando o

autocomplete="off"

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

Testado em:

• Firefox 3.5, 4 BETA
• Internet Explorer 8
• cromada

Adicionando autocomplete="off"não vai dar certo.

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.

Use um nome e um ID não padrão para os campos, portanto, em vez de "nome" ter "nome_". Os navegadores não o verão como o campo de nome. A melhor parte é que você pode fazer isso em alguns, mas não em todos os campos, e ele preencherá automaticamente alguns, mas nem todos os campos.

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

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

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

O problema é que os usuários sem javascript obtêm a funcionalidade de preenchimento automático.

tente isso também se simplesmente autocomplete="off"não funcionar:

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

Não acredito que esse ainda seja um problema muito 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 era 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!

Então aqui está:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Esse é 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 as informações confidenciais e não devam 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á a minha correção. Uma abordagem que eu implementei na 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 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 como de costume

var_dump($_POST['username']);

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

Tudo funciona como um encanto, mesmo que os navegadores atualizem, desejam ignorar o preenchimento automático ou não. Essa foi a melhor maneira de corrigir o problema para mim.

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

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

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

Você pode usar na entrada.

Por exemplo;

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