Desactivar autocompletar a través de CSS

Tal como está, no hay ningún atributo 'autocomplete off' en CSS. Sin embargo, html tiene un código fácil para esto:

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

Si está buscando un efector para todo el sitio, uno fácil sería simplemente tener una función js para correr a través de todos los 'input' s y agregar esta etiqueta, o buscar la clase / id css correspondiente.

El atributo autocompletar funciona bien en Chrome y Firefox (!), pero vea también ¿Hay una forma válida de W3C para deshabilitar el autocompletado en un formulario HTML?

Se puede implementar fácilmente mediante jQuery

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

Si estás usando un form puedes desactivar todos los autocompletos con,

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

CSS no tiene esta habilidad. Tendría que usar scripts del lado del cliente.

Probé todas las formas sugeridas de las respuestas a esta pregunta y otros artículos en la web, pero no funcionó de todos modos. Probé autocomplete= "new-random-value", autocomplete=" off " en el elemento de formulario, usando el script del lado del cliente como se muestra a continuación, pero fuera de $(documento).ready () como uno de los usuarios mencionó:

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

He encontrado tal vez otra prioridad en el navegador causa este comportamiento extraño! Así que busqué más y finalmente, volví a leer cuidadosamente debajo de las líneas de este buen artículo :

Por esta razón, muchos navegadores modernos no admiten autocomplete = " off " para campos de inicio de sesión:

Si un sitio establece autocomplete = " off " para a, y el formulario incluye nombre de usuario y contraseña campos de entrada, entonces el navegador seguirá ofreciendo para recordar este login, y si el usuario está de acuerdo, el navegador rellene automáticamente esos campos la próxima vez que el usuario visite la página. Si a el sitio establece autocomplete = " off " para los campos de nombre de usuario y contraseña, entonces el navegador seguirá ofreciendo recordar este login, y si el el usuario acepta, el navegador autocompletará esos campos la próxima vez que el usuario visita la página. Este es el comportamiento en Firefox (desde la versión 38), Google Chrome (desde 34) e Internet Explorer (desde la versión 11).

Si está definiendo una página de administración de usuarios donde un usuario puede especificar una nueva contraseña para otra persona, y por lo tanto desea evitar llenado automático de campos de contraseña, puede usar autocomplete = "nueva contraseña"; sin embargo, el soporte para este valor no se ha implementado en Firefox.

Simplemente funcionó. Probé en Chrome especialmente y espero que esto siga funcionando y ayudar a los demás.

Gracias a la solución de@ahhmarr pude resolver el mismo problema en mi entorno Angular+ui-router, que compartiré aquí para quien esté interesado.

En mi index.html he añadido el siguiente script:

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

Luego, para cubrir los cambios de estado, he agregado lo siguiente en mi controlador raíz:

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

Los tiempos de espera son para que el html se muestre antes de aplicar jquery.

Si encuentra una solución mejor, hágamelo saber.

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