ti-enxame.com

Desativando o preenchimento automático do Chrome

Eu tenho tido problemas com o comportamento de preenchimento automático de cromo em vários formulários.

Todos os campos do formulário têm nomes muito comuns e precisos, como "email", "nome" ou "senha", e eles também têm autocomplete="off" set.

O sinalizador de preenchimento automático desativou com êxito o comportamento de preenchimento automático, em que uma lista suspensa de valores aparece à medida que você começa a digitar, mas não alterou os valores que o Chrome preenche automaticamente os campos.

Esse comportamento seria ok, 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 sobre isso, então está verificado que isso está acontecendo em vários casos, e não como algum tipo de resultado para algo que eu fiz localmente em 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 backend, mas isso parece ser uma maneira muito hacky de contornar esse problema. Há alguma tag ou peculiaridade que altere o comportamento de preenchimento automático que poderia ser usado para corrigir isso?

620
templaedhel

Para novas versões do Chrome, você pode simplesmente colocar autocomplete="new-password" no campo de senha e pronto. Eu verifiquei, funciona bem.

Recebi essa dica do desenvolvedor do Chrome nesta discussão: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

P.S. não se esqueça de usar nomes exclusivos para campos diferentes para evitar o preenchimento automático.

721
tibalt

Acabei de descobrir que, se você tiver um nome de usuário e senha para um site, a versão atual do Chrome preencherá automaticamente seu nome de usuário/endereço de e-mail em o campo antes qualquer campo type=password. Ele não se importa com o que o campo é chamado - apenas assume o campo antes que a senha seja seu nome de usuário.

Solução antiga

Basta usar <form autocomplete="off"> e isso evita o preenchimento de senha, bem como qualquer tipo de preenchimento heurístico de campos com base em suposições que um navegador possa fazer (que geralmente estão erradas). Ao contrário de usar <input autocomplete="off">, que parece ser praticamente ignorado pela senha autofill (no Chrome, o Firefox obedece).

Solução atualizada

O Chrome agora ignora <form autocomplete="off">. Portanto, minha solução original (que eu havia deletado) agora é toda a raiva.

Basta criar alguns campos e ocultá-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 da sua equipe se perguntarão o que você está fazendo!

Atualização de março de 2016

Apenas testei com o mais recente Chrome - tudo bem. 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 a acessibilidade porque os campos são display:none, o que significa que eles não recebem foco. Como mencionei, você precisa colocá-los before seus campos reais.

Se você estiver usando javascript para modificar seu formulário, há um truque extra que você precisará. Mostrar os campos falsos enquanto você está manipulando o formulário e, em seguida, ocultá-los 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 de julho de 2018

Minha solução não funciona mais tão bem, já que os especialistas em anti-usabilidade do Chrome têm trabalhado arduamente. Mas eles nos jogaram um osso na forma de:

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

Isso funciona e principalmente resolve o problema.

No entanto, isso não funciona quando você não tem um campo de senha, mas apenas um endereço de e-mail. Isso também pode ser difícil fazer com que pare de ficar amarelo e prefilling. A solução de campos falsos pode ser usada para corrigir isso.

Na verdade, às vezes você precisa colocar dois lotes de campos falsos e experimentá-los em lugares diferentes. Por exemplo, eu já tinha campos falsos no começo do meu formulário, mas o Chrome recentemente começou a preencher meu campo "E-mail" novamente. Deduzi e coloquei mais campos falsos antes do campo "E-mail", e isso foi corrigido . Remover o primeiro ou o segundo lote dos campos é revertido para preenchimento automático com zelo incorreto.

581
mike nelson

Depois de meses e meses de luta, descobri que a solução é muito mais simples do que você imagina:

Em vez de autocomplete="off" useautocomplete="false";)

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

216
Kaszoni Ferencz

Às vezes, mesmo autocomplete=off não impedirá o preenchimento de credenciais em campos errados.

Uma solução alternativa é desabilitar o preenchimento automático do navegador usando o modo somente leitura e definir o foco de gravação:

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

O evento focus ocorre com cliques do mouse e tabulação nos campos.

Atualizar:

Mobile Safari define o cursor no campo, mas não mostra o teclado virtual. Essa nova solução funciona como antes, mas manipula 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 auto preenche 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 no Safari, quando há campos de senha em o mesmo formulário Acho que o navegador procura um campo de senha para inserir suas credenciais salvas. Em seguida, autofills username no campo de entrada de texto mais próximo, que aparece antes do campo de senha no DOM (apenas supondo devido à observação). Como o navegador é a última instância e você não pode controlá-lo,

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

93
dsuess

Tente isso. Eu sei que a questão é um pouco antiga, mas esta é uma abordagem diferente para o problema.

Eu também notei que o problema vem logo acima do campo password.

Eu tentei os dois métodos como

<form autocomplete="off"> e <input autocomplete="off"> mas nenhum deles funcionou para mim.

Então eu consertei usando o snippet 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.

61
Jobin Jose

Se você estiver implementando um recurso de caixa de pesquisa, tente definir o atributo type como search da seguinte 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

50
dana

Eu não sei porque, mas isso ajudou e trabalhou para mim.

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

Eu não tenho idéia do porquê, mas autocompelete = "new-password" desativa o preenchimento automático. Funcionou na versão mais recente 49.0.2623.112 chrome.

44
Tauras

Para mim, simples

<form autocomplete="off" role="presentation">

Fez isso.

Testado em várias versões, a última tentativa foi em 56.0.2924.87

43
Kuf

Você tem que adicionar este atributo:

autocomplete="new-password"

Link da fonte: Artigo Completo

22
Hitesh Kalwani

É tão simples e complicado :)

o google chrome basicamente procura por todos os primeiros elementos de senha visíveis dentro das tags <form>, <body> e <iframe> para habilitar a recarga automática para eles, então para desabilitar isso você precisa adicionar um elemento de senha fictício como o seguinte:

    • se o seu elemento de senha dentro de uma tag <form> você precisa colocar o elemento fictício como o primeiro elemento em seu formulário imediatamente após a tag de abertura <form>

    • se o seu elemento de senha não dentro de uma tag <form> colocar o elemento fictício como o primeiro elemento na sua página html imediatamente após a tag de abertura <body>

  1. Você precisa esconder o elemento dummy sem usar o css display:none então basicamente use o seguinte como um elemento de senha fictício.

    <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
    
19
Fareed Alnamrouti

Aqui estão minhas soluções propostas, já que o Google está insistindo em ignorar todas as soluções que as pessoas parecem fazer.

Opção 1 - selecione todo o texto ao clicar

Defina os valores das entradas como um exemplo para seu usuário (por exemplo, [email protected]) 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="[email protected]">
<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 uma loucura. Então, esperamos que esta 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 e-mail e senha, defina o valor do campo de e-mail para " " (um espaço) e adicione o atributo/valor autocomplete="off" e limpe isso com JavaScript. Você pode deixar o valor da senha vazio.

Se o usuário não tiver JavaScript por algum motivo, assegure-se de cortar o lado do servidor de entrada (provavelmente você deve estar mesmo assim), caso ele não apague o espaço.

Aqui está o jQuery:

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

Eu defini um tempo limite para 15 porque 5 parecia funcionar ocasionalmente em meus testes, então triplicar esse número parece ser uma aposta segura.

Deixar de definir o valor inicial para um espaço resulta no Chrome deixando a entrada como amarela, como se tivesse sido preenchida automaticamente.

Opção 3 - entradas ocultas

Coloque isso no começo do formulário:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

Certifique-se de manter a nota HTML para que seus outros desenvolvedores não a excluam! Certifique-se também de que o nome da entrada oculta seja relevante.

17
rybo111

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

autocomplete="nope"
14
Denis Brezhitskiy

Descobri que adicionar isso a um formulário impede que o Google Chrome use 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 o Autocomplete. Tem uma verdadeira Microsoft sente isso.

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

adicionar atributo readonly à tag junto com o evento onfocus removê-lo corrige o problema

11
Avindu Hewa

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 interrompa esse processo invalidando isso:

<input type="text">
<input type="text" onfocus="this.type='password'">
9
Bernesto

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

A solução fornecida por Mike Nelsons não funcionou para mim no Chrome 50.0.2661.102 m. Basta adicionar um elemento de entrada do mesmo tipo à exibição: nenhum conjunto não desativa mais a conclusão automática do navegador nativo. Agora é necessário duplicar o atributo name do campo de entrada no qual você deseja desabilitar o preenchimento automático.

Além disso, para evitar que o campo de entrada seja duplicado quando eles estiverem em um elemento de formulário, você deve colocar um elemento desabilitado 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">
8
mccainz

Se você estiver com problemas para manter espaços reservados, mas desativando o preenchimento automático de cromo, encontrei essa 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 o required="required" e algum CSS, poderá replicar os espaços reservados e o Chrome não atenderá às 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/

7
Ryan Grush

Em 2016, o Google Chrome começou a ignorar autocomplete=off embora esteja no W3C. A resposta que eles postaram :

A parte complicada aqui é que em algum lugar ao longo da jornada do autocomplete da web = off torna-se um padrão para muitos campos de formulário, sem qualquer pensamento real sendo determinado se isso é bom ou não para os usuários. Isso não significa que não haja casos muito válidos em que você não queira os dados de preenchimento automático do navegador (por exemplo, em sistemas CRM), mas, em geral, os vemos como casos de minoria. Como resultado, começamos a ignorar o autocomplete = off para os dados do preenchimento automático do Chrome.

O que essencialmente diz: sabemos melhor o que um usuário quer.

Eles abriram outro bug para postar casos de uso válidos quando o autocomplete = off é necessário

Eu não vi problemas relacionados ao preenchimento automático de todo o meu aplicativo B2B, mas apenas com a entrada de um tipo de senha.

O preenchimento automático entra em cena se houver algum campo de senha na tela, mesmo que oculto. Para quebrar essa lógica, você pode colocar cada campo de senha em seu próprio formulário, se ele não quebrar sua própria lógica de página.

<input type=name >

<form>
    <input type=password >
</form>
6
norekhov

Ao definir autocomplete para off deve funcionar aqui eu tenho um exemplo que é usado pelo google na página de pesquisa. Eu encontrei isso do elemento inspecionar.

enter image description here

edit : No caso de off não funcionar, tente false ou nofill. No meu caso, está trabalhando com o chrome versão 48.0

6
mumair

Bem, já que todos nós temos esse problema, investi algum tempo para escrever uma extensão jQuery funcional para esse problema. Google tem que 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);

Basta adicionar isso a um arquivo como /js/jquery.extends.js e incluí-lo após jQuery. Aplique-o a cada elemento do formulário no carregamento do documento da seguinte forma:

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle com testes

6
MagicSux

Eu realmente não gostei de fazer campos escondidos, acho que fazer isso vai ficar muito confuso muito rápido.

Nos campos de entrada que você deseja interromper do preenchimento automático, isso funcionará. Tornar os campos somente leitura e em foco remover esse atributo como este

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

o que isto significa é que você primeiro tem que remover o atributo read only selecionando o campo e, nesse momento, provavelmente você preencherá com sua própria entrada de usuário e inclinando o autopreencher para assumir

6
MZaragoza

Há duas peças para isso. O Chrome e outros navegadores lembrarão os valores inseridos anteriormente para os nomes de campo e fornecerão uma lista de autocompletar ao usuário com base nisso (notadamente, entradas de tipo de senha são nunca lembradas dessa maneira, por razões bastante óbvias). Você pode adicionar autocomplete="off" para evitar isso em coisas como seu campo de e-mail.

No entanto, você tem preenchedores de senha. A maioria dos navegadores tem suas próprias implementações internas e também há muitos utilitários de terceiros que fornecem essa funcionalidade. Isso, você não pode parar. Este é o usuário que faz sua própria escolha para salvar essas informações para serem preenchidas automaticamente mais tarde e está completamente fora do escopo e da esfera de influência do seu aplicativo.

6
Chris Pratt

Solução diferente, baseada em webkit. Como já foi mencionado, sempre que o Chrome encontra um campo de senha, ele preenche automaticamente o email. AFAIK, isso é independente do autocomplete = [whatever].

Para contornar isso, altere o tipo de entrada para texto e aplique a fonte de segurança do Webkit na forma que desejar.

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

Pelo que eu 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 irá remover asteriscos, é claro que a entrada type = password pode ser facilmente alterada para input type = text no console para revelar quaisquer senhas preenchidas automaticamente, então é praticamente a mesma coisa.

5
Michael.

Os valores inseridos anteriormente armazenados em cache pelo chrome são exibidos como lista suspensa de seleção.Isso pode ser desativado por autocomplete = off, o endereço salvo explicitamente nas configurações avançadas do chrome fornece pop-up automático quando um campo de endereço obtém foco.Isso pode ser desativado por autocomplete = "false" Mas permitirá que o chrome exiba valores em cache no menu suspenso.

Em um campo html de entrada seguinte, os dois serão desativados.

Role="presentation" & autocomplete="off"

Ao selecionar campos de entrada para preenchimento automático de endereço, o Chrome ignora os campos de entrada que não têm elemento HTML de rótulo anterior.

Para garantir que o analisador de cromo ignore um campo de entrada para o endereço de preenchimento automático, um botão oculto ou um controle de imagem pode ser adicionado 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 entrada de rótulo para preenchimento automático. As caixas de seleção são ignoradas durante a análise dos campos de endereço

O Chrome também considera o atributo "for" no elemento label. Pode ser usado para quebrar a sequência de análise do cromo.

5
Momin

De acordo com o relatório de bug do Chromium # 352347 o Chrome não mais respeita autocomplete="off|false|anythingelse", nem em formulários nem em entradas.

A única solução que funcionou para mim foi adicionar um campo de senha fictício :

<input type="password" class="hidden" />
<input type="password" />
5

Aqui está um hack sujo

Você tem seu elemento aqui (adicionando o atributo desativado):

<input type="text" name="test" id="test" disabled="disabled" />

E, na parte inferior da sua página, coloque um pouco de JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>
5
hyper_st8

Experimente o seguinte código jQuery que funcionou para mim.

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

Em vez de "isto é o que funcionou para mim" respostas e outras respostas que parecem hacks completos ... Este é atualmente como o Chrome (e as mais recentes especificações) irá lidar com os atributos autocomplete em seus elementos input:

https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=en

TLDR: Adicione autocomplete='<value>' em suas entradas, onde <value> deve ser qualquer string que defina para que serve o campo. Isso funciona de maneira semelhante ao atributo name. Use os valores sugeridos no link acima, sempre que possível.

Além disso, remova o atributo autocomplete do seu formulário

4
Deminetix

A única maneira que funciona para mim foi: (jQuery obrigatório)

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

Eu enfrentei o mesmo problema. E aqui está a solução para desabilitar o nome de usuário e senha de preenchimento automático 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">
4
hitman

tente com um espaço em branco no valor:

<input type="email" name="email" value="&nbsp;">
<input type="password" name="password" value="&nbsp;">

chrome 54.0.2840.59

3
Isaac Limón

A solução mais recente de adicionar autocomplete="new-password" ao campo de senha é ótima para evitar que o Chrome seja preenchido automaticamente.

No entanto, como observou a SBBL, isso não impede que o Chrome peça que você salve a senha depois que o envio do formulário for concluído. A partir do Chrome 51.0.2704.106, descobri que você pode fazer isso adicionando um campo de senha invisível simulado que também tem o atributo autocomplete="new-password". Note que "display: none" não funciona neste caso. por exemplo. Adicione algo assim antes do campo da senha real:

<input type="password" autocomplete="new-password" 
style="visibility:hidden;height:0;width:1px;position:absolute;left:0;top:0">`

Isso só funcionou para mim quando defini a largura para um valor diferente de zero. Graças a tibalt e namrouti fareed para as respostas originais.

2
CodeSimian

Minha solução alternativa, já que nenhuma das opções acima parece funcionar no Chrome 63 e além

Eu consertei isso no meu site, substituindo o elemento de entrada

<p class="input" contenteditable="true">&nbsp;</p>

e usando o jQuery para preencher um campo oculto antes do envio.

Mas este é um truque realmente horrível necessário por uma decisão ruim no Chromium.

2
lufc

Eu finalmente encontrei sucesso usando um textarea. Para um campo de senha, existe um manipulador de eventos que substitui cada caractere digitado por um “•”.

2
eug

Eu precisava de alguns campos extras para funcionar corretamente, já que o Chrome realmente preenche muitos campos. E eu também precisava esconder os campos de uma forma mais sofisticada do que a exibição: nada para que funcionasse de verdade.

<style>.stylish { position:absolute; top:-2000px; }</style>
<input id="_____fake_email_remembered" class="stylish" tabindex="-1"  type="email" name="email_autofill"/> 
<input id="_____fake_userName_remembered" class="stylish" tabindex="-1"  type="text" name="userName_autofill"/>
<input id="_____fake_firstName_remembered" class="stylish" tabindex="-1"   type="text" name="firstName_autofill"/>
<input id="_____fake_lastName_remembered" class="stylish" tabindex="-1"   type="text" name="lastName_autofill"/>
<input id="_____fake_phone_remembered" class="stylish"  tabindex="-1"  type="text" name="phone_autofill"/>
<input id="_____fake_address_remembered" class="stylish"  tabindex="-1"   type="text" name="address_autofill"/>
<input id="_____fake_password_remembered" class="stylish"  tabindex="-1"   type="password" name="password_autofill"/>
<input id="_____fake_password_remembered2" class="stylish"  tabindex="-1"   type="password" name="passwordRepeated_autofill"/>
1
Juan Carrey

Como o dvd Franco disse, para mim só colocar autocomplete = 'off' em todos os campos funcionou. Então eu coloquei essas regras jquery em $ (document) .ready (); função no meu arquivo .js principal

$('form.no_autofill').attr('autocomplete','off');
$('.no_autofill input').attr('autocomplete','off');
1
bocapio

Minha solução depende de três coisas:

  1. evento keydown
  2. mascarando o nome do campo
  3. anulando os valores dos campos no envio

Primeiro de tudo, precisamos evitar o preenchimento automático de nome de usuário e senha, então, inicialmente, vamos definir dois sinalizadores, i -> username e j -> passowrd com valor verdadeiro, então sem nenhum keydown para os campos i ej serão verdade.

Em maiúsculas e minúsculas o mascaramento de campo é ocorrido no lado do servidor, passando a cadeia aleatória, poderia ser feito facilmente usando o lado do cliente também.

Este é o código:

$(document).ready(function(){
   i= true; //username flag
   j= true; // password flag
   $("#username{{$Rand}}").keydown(function(e){
          // {{$Rand}} is server side value passed in blade view
          // keyboard buttons are clicked in the field
            i = false;       
    });
   $("#passowrd{{$Rand}}").keydown(function(e){
          // {{$Rand}} is server side value passed in blade view
          // keyboard buttons are clicked in the field
            j = false;       
    });
    // Now we will use change event,
   $("#username{{$Rand}}").change(function(){
    if($(this).val() != ''){ //the field has value
        if(i){ // there is no keyboard buttons clicked over it
            $(this).val(''); // blank the field value
        }

    }
})
$("#password{{$Rand}}").change(function(){
    if($(this).val() != ''){ // the same as username but using flag j
        if(j){
            $(this).val('');
        }

    }
})

   $("#sForm").submit(function(e){ // the id of my form
      $("#password-s").val($("#password{{$Rand}}").val());
        $("#username-s").val($("#username{{$Rand}}").val());
        // Here the server will deal with fields names `password` and `username` of the hidden fields
       $("#username{{$Rand}}").val('');
        $("#password{{$Rand}}").val(''); 

 })
})

Aqui está o HTML:

<form class="form-horizontal" autocomplete="off" role="form" id="sForm" method="POST" action="https://example.com/login">

                        <input type="hidden" name="password" id="password-s">
                        <input type="hidden" name="username" id="username-s">

                            <label for="usernameTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Username</label>

                                <input id="usernameTDU3m4d3I5" placeholder="Username" autocomplete="off" style="border-bottom-left-radius: 10px; border-top-right-radius: 10px; font-family: fixed; font-size: x-large;" type="text" class="form-control" name="usernameTDU3m4d3I5" value="" required="required" autofocus="">                                

                            <label for="passwordTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Password</label>
                                <input id="passwordTDU3m4d3I5" placeholder="Password" autocomplete="off" type="password" class="form-control" name="pa-TDU3m4d3I5" required="">


                                <button type="submit" class="btn btn-success">
                                    <i class="fox-login" style="text-shadow: 0px 1px 0px #000"></i><strong>Login</strong>&nbsp;&nbsp;
                                </button>

                                </form>

A solução acima, na verdade, não eliminará ou impedirá o preenchimento automático do nome de usuário e senha, mas tornará esse preenchimento automático inútil. ou seja, sem pressionar o botão do teclado no campo, o valor do campo ficará em branco antes de enviar, portanto, o usuário será solicitado a inseri-los.

Atualizar

Também podemos usar o evento click para evitar que o preenchimento automático da lista de usuários seja exibido abaixo do campo, como segue:

 $("#username{{$Rand}}").click(function(){

            $(this).val('');
            i = true;

})
$("#password{{$Rand}}").click(function(){

            $(this).val('');
            j = true;

})

Limitações:

Esta solução não funciona como esperado em dispositivos de tela sensível ao toque.

Atualização final

Eu fiz a seguinte implementação limpa como o seguinte:

preventAutoComplete = true; // modifier to allow or disallow autocomplete
trackInputs = {password:"0", username:"0"}; //Password and username fields ids as object's property, and "0" as its their values
// Prevent autocomplete
    if(preventAutoComplete){
        $("input").change(function(e){ // Change event is fired as autocomplete occurred at the input field 
            trackId = $(this).attr('id'); //get the input field id to access the trackInputs object            
            if (trackInputs[trackId] == '0' || trackInputs[trackId] != $(this).val()){ //trackInputs property value not changed or the prperty value ever it it is not equals the input field value
                $(this).val(''); // empty the field
            }
        });
        $("input").keyup(function(e){
            trackId = $(this).attr('id');
            trackInputs[trackId] = $(this).val(); //Update trackInputs property with the value of the field with each keyup.
        });
    } 
1
SaidbakR

Em Chromium 53.0.2785.92 (64-bit) o ​​seguinte trabalhou

<div style="visibility:hidden">
    <input type="text" name="fake_username_remembered">
    <input type="password" name="fake_password_remembered">
</div>

display:none não funciona

1
michalzuber

Então aparentemente as melhores correções/hacks para isso agora não estão mais funcionando, novamente. A versão do Chrome que eu uso é a versão 49.0.2623.110 me meus formulários de criação de conta agora mostram um nome de usuário e senha salvos que não têm nada a ver com o formulário. Obrigado Chrome! Outros hacks pareciam horríveis, mas esse hack é menos horrível ...

Por que precisamos que esses hacks funcionem é porque esses formulários geralmente são formulários de criação de conta, ou seja, não um formulário de login que deve ter permissão para preencher a senha. Formulários de criação de conta você não quer o incômodo de excluir nome de usuário e senhas. Logicamente, isso significa que o campo de senha nunca será preenchido na renderização. Então eu uso uma caixa de texto em vez de um pouco de javascript.

<input type="text" id="password" name="password" />

<script>
    setTimeout(function() {
        $("#password").prop("type", "password");
    }, 100); 
    // time out required to make sure it is not set as a password field before Google fills it in. You may need to adjust this timeout depending on your page load times.
</script>

Acho isso aceitável, já que um usuário não chegará a um campo de senha dentro de um curto período de tempo, e postar de volta no servidor não faz diferença se o campo for um campo de senha, já que é enviado de volta de texto simples.

Advertência: Se, como eu, você usa a mesma forma de criação que um formulário de atualização, as coisas podem ficar complicadas. Eu uso mvc.asp c # e quando eu uso @ Html.PasswordFor () a senha não é adicionada à caixa de entrada. Isto é uma coisa boa. Eu codifiquei isso. Mas usando @ Html.TextBoxFor () e a senha serão adicionados à caixa de entrada e, em seguida, ocultos como uma senha. No entanto, como minhas senhas são criptografadas, a senha na caixa de entrada é a senha com hash e nunca deve ser enviada de volta para o servidor - salvar acidentalmente uma senha com hash com hash seria uma dor para alguém tentando efetuar login. Lembre-se de definir a senha para uma string vazia antes que a caixa de entrada seja renderizada, se estiver usando este método.

1
Colin Wiseman

Caso o display: none não funcione, isso também é possível e parece estar funcionando (Chrome v60.0.3112.113):

.hidden-fields {
    opacity: 0;
    float: left;
    height: 0px;
    width: 0px;
}

<input type="text" name="username" class="hidden-fields"> 
<input type="password" name="password" class="hidden-fields">

<your actual login fields></your actual login fields>
1
Rikku121

Finalmente acho que vim com uma solução decente. Entender melhor como funciona o menu suspenso com o Chrome ajudou :) Basicamente, o menu suspenso será exibido quando você focar a entrada e quando você gerar um evento de mouse para baixo quando estiver digitando uma entrada que corresponda ao que o Chrome tem na memória. Tendo isso em mente, e que o Chrome faz isso para certas entradas quando eles têm nomes padrão como "nome", "e-mail", etc., só precisamos remover o nome quando o menu suspenso for exibido e adicioná-lo novamente após :) Eu queria usar uma solução que pudesse funcionar apenas adicionando o autocomplete de atributo. Eu achei que fazia sentido. Este é o código:

Solução 1

jQuery('body').on('mousedown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName =="undefined")
        this.currentName=jQuery(this).attr('name');
    jQuery(this).attr('name','');
});

jQuery('body').on('blur','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    jQuery(this).attr('name',this.currentName);
});

Solução 2 (My Favorite One)

A solução que eu descrevi acima irá remover o nome da entrada até que nós removamos o foco (blur), nesse momento ele irá colocar o nome original de volta. Mas pode acontecer que estejamos interessados ​​em ter acesso à entrada através do atributo name enquanto estamos digitando. O que significa que precisamos colocar o nome de volta logo após cada entrada. Esta solução, basicamente, é baseada na primeira solução. Nesse caso, vamos adicionar o nome na tecla abaixo e colocá-lo novamente na chave. Eu acho que isso é mais legal para a compatibilidade com o que o comportamento "autocompletar off" deve ser. De qualquer forma este é o código:

jQuery('body').on('mousedown keydown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName =="undefined")
        this.currentName=jQuery(this).attr('name');
    jQuery(this).attr('name','');
});
jQuery('body').on('blur keyup','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName !="undefined")
        jQuery(this).attr('name',this.currentName);
});

Observe que para as Soluções 1 e 2, acabei de pegar os casos em que o nome da entrada é "nome" e "email". Para qualquer outro caso em que esse atributo faz o Chrome gerar o menu suspenso, você terá que adicioná-lo no seletor para o evento de mouse para baixo.

Solução 3

Esta solução é muito mais confusa. Eu não percebi que o comportamento que estamos tentando corrigir é baseado apenas naquelas entradas com um nome específico como "nome, email, etc". A abordagem dessa solução foi para esse caso que o Chrome exibe outros nomes que não conhecemos a priori. Seria uma solução muito genérica. Eu não gosto tanto quanto os outros 2, basicamente porque pode haver um pequeno piscar de olhos quando pressionamos a tecla delete. Eu vou explicar isso abaixo.

Descobri que a lista suspensa estava aparecendo depois de um segundo clique na entrada, mas não no primeiro clique quando você foca a primeira vez na entrada. Eu ligo um evento "mousedown" para todos esses elementos onde o manipulador basicamente detecta se ele já está focado na entrada e caso ele detecte outro "mouse para baixo", force um .blur () e depois .focus () depois, evitando a lista suspensa no segundo clique, uma vez que está focada. Espero que fique claro, apenas no caso aqui é o código que eu usei:

jQuery('body').on('mousedown','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(jQuery(this).is(':focus')) {
        jQuery(this).blur();
        jQuery(this).focus();
    }
});

Por outro lado, a fim de evitar o menu suspenso enquanto você digita, caso ele corresponda às sugestões do Chrome ... Isso é um pouco complicado. Eu apenas decidi substituir o comportamento padrão de uma entrada enquanto o usuário digita. O dropdown avalia a entrada do mouse para baixo, então eu evito o comportamento padrão para alfanuméricos, espaço, etc. O único problema é com Command, Ctrl e delete. Para este caso eu tive que ligar também um evento no mouse. Ele permite o comportamento padrão nos dois primeiros casos para que você possa copiar e colar ou selecionar todos. No caso da exclusão, tenho que permitir o comportamento padrão, mas se depois de excluir um caractere a entrada corresponder às sugestões do Chrome, mais uma vez ele mostrará a lista suspensa. Para este caso eu tive que usar o mesmo truque de desfoque e foco. O único inconveniente que encontrei nisso é que, como estamos cancelando o comportamento no keyup, e o chrome tenta mostrá-lo no keydown, há um pequeno flicker. De qualquer forma, isso é o melhor que eu poderia fazer. Provavelmente, isso exigirá a filtragem de caracteres em um ponto. Acabei de adicionar as condições feitas mais sentido por enquanto. Esta é a segunda parte do código:

jQuery('body').on('keydown','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    var ctrlKey = 17,cmKey = 91;
    var charCode = e.which || e.keyCode;

    if(charCode!=16 && this.commandDown != true && this.ctrlDown != true && ((charCode>47 && charCode<58)||(charCode>64 && charCode<91)||(charCode>96 && charCode<123)||charCode==0 || charCode==32)){ 
        e.preventDefault();
        var charStr = String.fromCharCode(charCode);
        if(!e.shiftKey)
            charStr = charStr.toLowerCase(charStr);
        $(this).val($(this).val() + charStr);
    }else{
        if (charCode == cmKey) this.commandDown = true;
        if (charCode == ctrlKey) this.ctrlDown = true;
    }
});
jQuery('body').on('keyup','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    var allowed=[8];//Delete
    var ctrlKey = 17,cmKey = 91;
    var charCode = e.which || e.keyCode;

    if (charCode == cmKey) {this.commandDown = false};
    if (charCode == ctrlKey) {this.ctrlDown = false};
    if(allowed.indexOf(charCode)>=0 || (this.commandDown!=false && this.ctrlDown!=false)){
        jQuery(this).blur();
        jQuery(this).focus();
}

Como eu disse essa solução é muito mais confusa. Foi o primeiro que usei até que percebi que o menu suspenso apareceu apenas para certos nomes de entrada.

Desculpe por escrever tanto, eu só queria ter certeza de que tudo estava claro. Espero que ajude.

1
Yared Rodriguez

Boom, Google Chrome e qualquer outra pessoa tentar derrotar isso então.

Consegui implementá-lo hoje, 7 de setembro de 2017, mas usando um FormCollection de strings aleatórias geradas na minha visualização do MVC.

Eu primeiro pegaria uma nova chave aleatória no meu controlador de índice da minha página de login, criptografaria e criaria uma nova string aleatória totalmente original (na verdade eu usei um cypher de 256 bits para fazer isso, e uma única chave de autenticação e cypher), texto simples 'Nome de usuário' e 'Senha' no final de cada seqüência de caracteres para depois me ajudar a identificar, a partir do controlador de exibição de imagem, o nome de usuário e a senha. Você também pode alterar essa string simples para qualquer coisa, desde que você conheça o padrão e seja exclusivo.

Na minha opinião, usei essas variáveis ​​adequadamente e, em seguida, no controlador de resposta - procurei por um FormCollection e encontrei minhas variáveis ​​correspondentes - e usei o valor-chave desse item como o nome de usuário e a senha correspondentes para processar adequadamente.

A outra questão que eu tinha, que eu acho que é sorrateira do Chrome, é que qualquer

Alguma ideia ?

<style>
    @@font-face {
      font-family: 'password';
      font-style: normal;
      font-weight: 400;
      src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
    }
</style>

<input type="text" name="@Model.UsernameRandomNameString" />
<input style="font-family: 'password'" type="text" name="@Model.PasswordRandomNameString" />

LogOnModel model = new LogOnModel()
            {
                UsernameRandomNameString = Cryptography.SimpleEncrypt("Username", UniqueGeneratorKey, UniqueGeneratorKey) + "Username",
                PasswordRandomNameString = Cryptography.SimpleEncrypt("Password", UniqueGeneratorKey, UniqueGeneratorKey) + "Password",
            };

Eu acho que é uma solução alternativa, mas funciona, e eu acho que também poderia ser prova do futuro, a menos que o Google determine que o URL da página tenha palavras-chave nele, então, apropriadamente, apenas adiciona suas extensões estúpidas no topo em qualquer campo de entrada. - mas isso é um pouco drástico.

1
Jeffrey Holmes

Para Angular usuários:

Como o autocomplete = 'off' ignora por novas versões do chrome, o desenvolvedor do chrome sugere autocomplete = 'false | random-string ', para que os navegadores google chrome/modernos tenham 2 tipos de ajudantes de usuários -

  1. autocomplete='off' (que impede as últimas sugestões em cache).
  2. autocomplete = 'false | random-string' (que impede a configuração de preenchimento automático, pois a 'cadeia aleatória' não é conhecida pelo navegador).

então, o que fazer, no caso de desabilitar ambas as sugestões irritantes? Aqui está o truque:

  1. adicione autocomplete = 'off' em todos os campos de entrada. (ou jquery simples).

Exemplo : $("input").attr('autocomplete', 'off');

  1. Remova a tag <form name='form-name'> do código HTML e adicione ng-form = 'form-name' no seu contêiner <div>. Adicionar ng-form="form-name" também reterá todas as suas validações.
1
Karan Vyas

Eu tentei todos os conselhos mencionados, mas nenhum deles funcionou. Estou usando um preenchimento automático do Google Places na entrada específica, e é muito feio se houver um preenchimento automático do Google Chrome acima da lista de preenchimento automático do Google Places. Mesmo definir autocomplete = "anything" é inútil porque o próprio plugin de autocomplete setf esta attr para "off" e é totalmente ignorado pelo chrome.

então minha solução é:

var fixAutocomplete = window.setInterval(function(){
    if ($('#myinput').attr('autocomplete') === 'false') {
        window.clearInterval(fixAutocomplete);  
    }

    $('#myinput').attr('autocomplete', 'false');
}, 500);
0
Gyürüs Máté

Solução HTML puro :

(Não precisa de javascript, não precisa de css e não precisa de entradas ocultas)

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

Notas:

  • forma não precisa necessariamente ser o pai direto do elemento de entrada
  • entrada precisa de um atributo de nome
0
w3jimmy

Eu estava tendo esse problema com uma janela modal "inscreva-se agora ou registre-se" e era um problema se o usuário tivesse salvo suas credenciais no navegador. Os campos de entrada e registro foram preenchidos, então eu consegui limpá-los com a seguinte diretiva angular js:

(function () {
    "use strict";

    var directive = function ($timeout) {
        return {
            restrict: "A",
            link: function (scope, element, attrs) {
                $timeout(function () {
                    element.val(" ");
                    $timeout(function () {
                        element.val("");
                    });
                });
            }
        };
    };

    angular.module("app.directives").directive("autofillClear", ["$timeout", directive]);
}());

É basicamente o mesmo que algumas das respostas anteriores que usariam jquery, mas feitas de maneira angular.

0
David Adams

Se você estiver usando formulários do Symfony, autocomplete=off não funcionará se o atributo for aplicado a partir do modelo de galho, em vez de usar FormBuilder.

Usa isto:

....
->add('field-name', TextType::class, array(
  'attr' => array(
      'autocomplete' => 'off'
  )
)
....

Ao invés de:

....
{{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....
0
tutak

O que eu fiz isso para mudar o tipo de entrada = "texto" para uma entrada multi-linha ou seja.

 overflow-x:hidden;
 overflow-y:hidden;
 vertical-align:middle;
 resize: none;

Uma explicação rápida do código: O overflow-x e -y hidden desativará os botões de rolagem à direita da caixa de texto. A algin vertial alinhará o meio vertical da legenda com a área de texto e o redimensionamento: nenhum desativará a captura de redimensionamento no canto inferior direito da área de texto.

Em essência, isso significa que sua área de texto aparecerá como uma caixa de texto, mas com o preenchimento automático de cromo desativado.

0
nawissor

Eu sei que isso não é exatamente relevante, mas aqui está o que eu fiz. Os campos preenchidos automaticamente geram um evento 'change', mas somente se você vinculá-lo a eles o mais cedo possível.

então eu coloco isso dentro da seção da cabeça.

  $(document).ready(function(){
            $('input').on('change',function(){$(this).val('')})
     }); 

e funcionou para mim.

0
Hemant_Negi

Meu hack - testado no Chrome 48:

Como o Chrome tenta descobrir o tipo de campo que está procurando itens como id ou name do <input>, mas também o conteúdo <label> associado, você só precisa encontrar nomes sem sentido para eles.

Para id e name, é fácil escolher outra coisa que não esteja listada aqui .

Para o label, inseri um <span> invisível no meio, por ex. para uma cidade (está mexendo com o meu Autocompletar lugares) :

<span>Ci<span style="display:none">*</span>ty</span>

Exemplo de trabalho completo:

<!DOCTYPE html>
<html>
  <body>
    <form method="post" action="/register">
      <div>
        <label for="name">Name</label>
        <input id="name" type="text" name="name" />
      </div>
      <div>
        <label for="email">Email</label>
        <input id="email" type="text" name="email" />
      </div>
      <div>
        <label for="id1">City</label>
        <input id="id1" type="text" name="id1" /> <-- STILL ON :(
      </div>
      <div>
        <label for="id2">Ci<span style="display:none">*</span>ty</label>
        <input id="id2" type="text" name="id2" /> <-- NOW OFF :)
      </div>
    </form>
  </body>
</html>
0
antoine129

Resposta de Jobin José me deu um começo. Aqui está o que funciona para mim:

<input type="password" name="password" id="password_fake" style="display:none;" />
<input type="password" name="password"/>

Certifique-se de não ter autocomplete = "off", o que estraga a solução.

0
alehro

Meu problema era que o Chrome preencheria automaticamente o código postal, na interface de preenchimento automático do Bootstrap, já que eu estava sugerindo automaticamente os valores possíveis do meu banco de dados.

Coisas que eu tinha que fazer:

  • Altere a propriedade id do campo de entrada para algo diferente de "postcode"
  • Altere o valor autocomplete do campo de entrada para false
  • Depois de chamar $('#postcode_field').autocomplete(...), tive que redefinir a propriedade de preenchimento automático com $('#postcode_field').prop('autocomplete', 'false'); porque o plug-in de preenchimento automático do Boostrap altera para off automaticamente.
0
frin

Desde exibição nenhum parece não funcionar mais adicionar o

<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>

dentro de uma div com overflow hidden, max-width e max-height 0px

Então, isso se torna algo como:

<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
    <input type="text" name="fakeusernameremembered"/>
    <input type="password" name="fakepasswordremembered"/>
</div>
0
MiVvlt

Digite um valor de '' (um espaço em branco) para o campo de nome de usuário.

<input type = 'text' value = ' ' name = 'username' />

Se você já estiver preenchendo o nome de usuário com um valor inserido pelo usuário, codifique para inserir um '' se não houver nenhum valor digitado pelo usuário.

Edit: Eu também tive que mudar os campos 'username' para ter um nome de outra coisa que 'username', por exemplo 'nameofuser'

0
Geoff Kendall

Também tem que definir o valor para empty (value = "") além de autocomplete = "off" para que funcione.

0
Iamzozo

O método de ocultá-lo, adicionando "display: none;" para a entrada não funcionou para mim se o formulário é gerado através de javascript.

Então, ao invés disso, eu os deixei invisíveis colocando-os fora de vista:

<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="text" name="fakeusernameremembered"/>
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="password" name="fakepasswordremembered"/>
0
typocoder

Infelizmente, nenhuma das soluções parece funcionar. Consegui excluir o email (nome de usuário) usando

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

técnica, mas a senha ainda é preenchida.

0
Srini Kancharla

Atualização de cromo de 20 de janeiro

Nenhuma das soluções acima, incluindo adicionar campos falsos ou definir autocomplete = nova-senha funciona. Sim, com esses cromo não será preenchido automaticamente, mas quando você inserir o campo de senha, ele sugerirá a senha novamente.

Descobri que, se você remover o campo de senha e, em seguida, adicioná-lo novamente sem um id , em seguida, o Chrome não preenchê-lo automaticamente e não sugerir a senha na entrada.

Use uma classe para obter o valor da senha em vez de um id.

Para o firefox, ainda é necessário adicionar um elemento fictício.

Essa solução também permite permitir/proibir o preenchimento automático com base em um sinalizador:

html:

<!-- form is initially hidden, password field has a dummy id and a class 'id' -->
<form id="loginForm" style="display:none;">
   <span>email:</span><input type="text" placeholder="Email" id="loginEmailInputID"/>
   <span>Password:</span><input class="loginPasswordInput" type="password" placeholder="Password" id="justForAutocomplete"/>
</form>

carregamento da página:

function hideAutoComplete(formId) {
    let passwordElem=$('#'+formId+' input:password'), prev=passwordElem.prev();
    passwordElem.remove();
    prev.after($('<input type="password" style="display:none">'), passwordElem.clone().val('').removeAttr('id'));
}

if (!allowAutoComplete) hideAutoComplete('loginForm');
$('#loginForm').show();

quando você precisar da senha:

$('.loginPasswordInput').val();
0
kofifus

Nenhuma das outras soluções para essas perguntas funcionou para mim.

O único pensamento que funcionou é este :

Remove os atributos "name" e "id" dos elementos e os atribui após 1ms. Coloque isso no documento, prepare-se.

$(document).ready(function() {
    $('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {

                var input = this;
                var name = $(input).attr('name');
                var id = $(input).attr('id');

                $(input).removeAttr('name');
                $(input).removeAttr('id');

                setTimeout(function () {
                    $(input).attr('name', name);
                    $(input).attr('id', id);
                }, 1);
            });
});
0
J0ANMM

Nenhuma das soluções funcionou para mim. Finalmente, depois de puxar meu cabelo por muitas horas, eu criei essa solução para o ReactJS.

Testado no FireFox 54.0.1, Chrome 61.0.3163.100, Mac OS 10.13

Eu mantenho o type="text" e mudo para o tipo relevante no evento onChange.

ex: HTML:

<input type="text" onChange={this.setAttributes} placeholder="Email" />

JS:

setAttr2: function(e){
    var value = e.target.value;
    if(value.length){
      e.target.setAttribute('type', 'email')
    } else {
      e.target.setAttribute('type', 'text')
    }
  }
0
coder9

O recurso de preenchimento automático foi desativado com êxito por meio desse truque. Funciona!

[HTML]

<div id="login_screen" style="min-height: 45px;">
   <input id="password_1" type="text" name="password">
</div>

[JQuery]

$("#login_screen").on('keyup keydown mousedown', '#password_1', function (e) {
    let elem = $(this);

    if (elem.val().length > 0 && elem.attr("type") === "text") {
        elem.attr("type", "password");
    } else {
        setTimeout(function () {
            if (elem.val().length === 0) {
                elem.attr("type", "text");
                elem.hide();
                setTimeout(function () {
                    elem.show().focus();
                }, 1);
            }
        }, 1);
    }

    if (elem.val() === "" && e.type === "mousedown") {
        elem.hide();
        setTimeout(function () {
            elem.show().focus();
        }, 1);
    }

});
0
EngineerCoder