Desativar autocomplete via CSS

94

É possível usar CSS para desativar o preenchimento automático em um elemento de formulário (especificamente um campo de texto)?

Eu uso uma biblioteca de tags que não permite o elemento autocomplete e gostaria de desabilitar o autocomplete sem usar Javascript.

David
fonte

Respostas:

52

Você pode usar um gerado ide nameeverytime, que é diferente, então o navegador não se lembra deste campo de texto e não conseguirá sugerir alguns valores.

Esta é, pelo menos, a alternativa segura para vários navegadores, mas eu recomendaria ir com a resposta de RobertsonM ( autocomplete="off").

Christopher Klewes
fonte
4
Um efeito colateral disso é que o histórico do navegador fica entulhado com muitos campos de formulário diferentes (aleatórios). Cada pesquisa de valores conhecidos nos bancos de dados locais do navegador levará algum tempo.
dermatthias
4
Boa ideia, mas não impede que os números de cartão de crédito sejam salvos no banco de dados de preenchimento automático não criptografado.
Hans-Peter Störr
Se você não usar nomes / ids de controle estáticos, qualquer script será interrompido e qualquer coleta de dados de formulário também será interrompida (a menos que cada aspecto de seu aplicativo esteja ciente da nova convenção de nomenclatura e esteja atualizando dinamicamente qualquer script / coleta de dados também )
Gary Richter,
Se você deve evitar o preenchimento automático, "randomizar" os nomes dos campos é o único caminho a percorrer. Usar qualquer dica semelhante autocomplete="off"será ignorado na versão do navegador X (atual + 1). (Por exemplo, o Google Chrome mais recente ignora autocomplete = off.)
Mikko Rantalainen
@kmoser: Mesmo se você anular o recurso de preenchimento automático do navegador ao randomizar o elemento, idele ainda o salvará no cache (ou seja, no disco rígido do usuário). O que é uma coisa horrível de se fazer com o número do cartão de crédito de alguém ou qualquer outra informação sensível. Além disso, ele desorganiza desnecessariamente as unidades de disco do usuário. Cada vez que eles visitam sua página, um novo arquivo (tipo cookie) é salvo no computador deles. Só para começar, tente limpar o cache do Chrome e ver quanto espaço ele vai liberar (se você não faz isso há um tempo). É por isso que a chamo de ideia horrível.
c00000fd
129

Do jeito que está, não existe o atributo 'autocomplete off' no CSS. No entanto, html tem um código fácil para isso:

<input type="text" id="foo" value="bar" autocomplete="off" />

Se você estiver procurando por um efetor para todo o site, uma tarefa fácil seria simplesmente ter uma função js para executar todas as 'entradas' e adicionar essa tag, ou procurar a classe / id css correspondente.

O atributo autocomplete funciona bem no Chrome e Firefox (!), Mas veja também Existe uma maneira válida do W3C para desativar o autocomplete em um formulário HTML?

RobertsonM
fonte
4
developer.mozilla.org/en-US/docs/Web/Security/… sugere autocomplete="anyrandominvalidvalue"que funcionará.
Andrew Stalker
49

você pode implementar facilmente por jQuery

$('input').attr('autocomplete','off');
ahhmarr
fonte
4
Na maioria dos casos, $ ('form'). Attr ('autocomplete', 'off'); é muito mais eficiente (veja o comentário para uma resposta abaixo)
irakli
@irakli No meu caso, usar formfoi a ÚNICA coisa que funcionou. Não input. Obrigado.
khaverim
1
Olá, 2018 e esta é praticamente a única maneira de fazer isso funcionar atualmente. Além disso, @irakli, isso é verdadeiro se você precisar usar em um formulário inteiro o formulário como seletor.
Devon Kiss
15

Se estiver usando um, formvocê pode desativar todos os preenchimentos automáticos com,

<form id="Form1" runat="server" autocomplete="off">
Ernest
fonte
na verdade, de acordo com o Mozilla: "Se o atributo autocomplete não for especificado em um elemento de entrada, o navegador usa o valor do atributo autocomplete do proprietário do formulário do elemento <input>. O proprietário do formulário é o elemento do formulário que este elemento <input> é um descendente de ou o elemento de formulário cujo id é especificado pelo atributo de formulário do elemento de entrada. Para obter mais informações, consulte o atributo autocomplete em <form>. " considerando isso uma alternativa jQuery muito mais eficiente do que a mostrada acima seria: $ ('form'). attr ('autocomplete', 'off');
Iraque
13

CSS não tem essa capacidade. Você precisaria usar scripts do lado do cliente.

Sampson
fonte
1
Alguma ideia de como desativar isso no edge? Não importa o que façamos, nós o vemos.
Benjamin Gruenbaum
@BenjaminGruenbaum Usar autocomplete="false"funcionará no Edge. Tecnicamente, qualquer valor inválido pode substituir "falso" aqui.
Andrew
4

Tentei todas as formas sugeridas a partir das respostas a esta pergunta e outros artigos na web, mas não funcionou de qualquer maneira. Eu tentei autocomplete = "new-random-value", autocomplete = "off" no elemento do formulário, usando o script do lado do cliente como abaixo, mas fora de $ (document) .ready () como um dos usuários mencionados:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

Achei talvez outra prioridade no navegador por causa desse comportamento estranho! Então, pesquisei mais e, finalmente, li novamente com atenção as linhas abaixo deste bom artigo :

Por esse motivo, muitos navegadores modernos não suportam autocomplete = "off" para campos de login:

Se um site definir autocomplete = "off" para a, e o formulário incluir campos de entrada de nome de usuário e senha, o navegador ainda oferecerá para lembrar esse login e, se o usuário concordar, o navegador preencherá automaticamente esses campos na próxima vez que o usuário visita a página. Se um site definir autocomplete = "off" para os campos de nome de usuário e senha, o navegador ainda se oferecerá para lembrar esse login e, se o usuário concordar, o navegador preencherá automaticamente esses campos na próxima vez que o usuário visitar a página. Este é o comportamento no Firefox (desde a versão 38), Google Chrome (desde 34) e Internet Explorer (desde a versão 11).

Se você estiver definindo uma página de gerenciamento de usuário onde um usuário pode especificar uma nova senha para outra pessoa e, portanto, deseja evitar o preenchimento automático de campos de senha, você pode usar autocomplete = "new-password" ; no entanto, o suporte para este valor não foi implementado no Firefox.

Simplesmente funcionou. Tentei no chrome especialmente e espero que continue funcionando e ajude os outros.

QMaster
fonte
1

Resolvi o problema adicionando um nome de preenchimento automático falso para todas as entradas.

$("input").attr("autocomplete", "fake-name-disable-autofill");
Webdma
fonte
0

Graças à solução do @ahhmarr, consegui resolver o mesmo problema no meu ambiente do roteador Angular + ui , que compartilharei aqui para quem tiver interesse.

No meu index.html, adicionei o seguinte script:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

Então, para cobrir as mudanças de estado, adicionei o seguinte no meu controlador raiz:

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

Os tempos limite são para o html renderizar antes de aplicar o jquery.

Se você encontrar uma solução melhor, por favor me avise.

TrampGuy
fonte
0

Você não pode usar CSS para desativar o preenchimento automático, mas pode usar HTML:

<input type="text" autocomplete="false" />

Tecnicamente, você pode substituir falsepor qualquer valor inválido e funcionará. Este iOS é a única solução que encontrei que também funciona no Edge.

Andrew
fonte
0

Existem 3 maneiras de fazer isso, eu menciono-as para ser da melhor maneira ...

Modo 1-HTML:

<input type="text" autocomplete="false" />

Modo 2-Javascript:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

Maneira 3-jQuery:

$('input').attr('autocomplete','off');
sina
fonte
0

Eu apenas uso no 'new-password'lugar 'off'do preenchimento automático.

e também tentei usar este código e funciona (pelo menos no meu lado), eu uso WP e GravityForm para sua informação

$('input').attr('autocomplete','new-password');
Kusukacoklat
fonte
-5
$('input').attr('autocomplete','off');
Rohit
fonte
3
Isso não fornece uma resposta à pergunta feita. O OP pediu especificamente uma solução CSS. Além disso, é exatamente a mesma resposta que uma já existente.
Holger apenas