Desativar autocomplete via CSS

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

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

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?

você pode implementar facilmente por jQuery

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

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

<form id="Form1" runat="server" autocomplete="off">

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

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.

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

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

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.

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.

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

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

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