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.

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.

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

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

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

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.

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.

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

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

Atualização 04/04/2016: Parece que isso foi corrigido! Consulte http://codereview.chromium.org/1473733008

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?

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.

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

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.

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.

Autocomplete="Off" não funciona mais.

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

Espero que ajude.

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

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

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

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.

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

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

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

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.

Em vez de autocomplete = "off", use autocomplete = "false" ;)

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

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.

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

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

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.

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.

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

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.

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.

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