Deshabilitar autocompletar a través de CSS

¿Es posible usar CSS para deshabilitar el autocompletar en un elemento de formulario (específicamente un campo de texto)?

Utilizo una biblioteca de etiquetas que no permite el elemento de autocompletar y me gustaría deshabilitar el autocompletar sin usar Javascript.

Puede usar un campo de texto generado idy namecada vez, que es diferente, por lo que el navegador no puede recordar este campo de texto y no podrá sugerir algunos valores.

Esta es al menos la alternativa segura para todos los navegadores, pero recomendaría ir con la respuesta de RobertsonM ( autocomplete="off").

Tal como está, no hay ningún atributo de "autocompletar desactivado" en CSS. Sin embargo, html tiene un código sencillo 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 ejecutar todas las 'entradas' y agregar esta etiqueta, o buscar la clase / id css correspondiente.

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

puedes implementar fácilmente con jQuery

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

Si está utilizando un form, puede deshabilitar todos los autocompletar con,

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

CSS no tiene esta capacidad. Debería utilizar secuencias de comandos del lado del cliente.

Intenté todas las formas sugeridas de las respuestas a esta pregunta y otros artículos en la web, pero de todos modos no funcionó. Intenté 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 $ (document) .ready () como uno de los usuarios mencionó:

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

¡Quizás encontré otra prioridad en el navegador debido a este comportamiento extraño! Así que busqué más y finalmente, volví a leer detenidamente las líneas de este buen artículo a continuación :

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

Si un sitio establece autocomplete = "off" para a, y el formulario incluye campos de entrada de nombre de usuario y contraseña, el navegador todavía ofrecerá recordar este inicio de sesión y, si el usuario está de acuerdo, el navegador completará automáticamente esos campos la próxima vez que el usuario visita la página. Si un sitio establece autocomplete = "off" para los campos de nombre de usuario y contraseña, el navegador aún ofrecerá recordar este inicio de sesión, y si el usuario está de acuerdo, el navegador completará automáticamente esos campos la próxima vez que el usuario visite 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 en la que un usuario puede especificar una nueva contraseña para otra persona y, por lo tanto, desea evitar el autocompletado de los campos de contraseña, puede usar autocomplete = "new-password" ; sin embargo, la compatibilidad con este valor no se ha implementado en Firefox.

Simplemente funcionó. Probé en Chrome especialmente y espero que esto siga funcionando y ayude a otros.

Resolví el problema agregando un nombre falso de autocompletar para todas las entradas.

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

Gracias a la solución de @ ahhmarr pude resolver el mismo problema en mi entorno de enrutador de interfaz de usuario Angular + , que compartiré aquí para quienes estén interesados.

En mi index.htmlhe agregado el siguiente script:

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

Luego, para cubrir los cambios de estado, agregué 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 html se procese antes de aplicar jquery.

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

No puede usar CSS para deshabilitar el autocompletado, pero puede usar HTML:

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

Técnicamente, puede reemplazarlo falsecon cualquier valor no válido y funcionará. Este iOS es la única solución que he encontrado que también funciona en Edge.

Hay 3 formas de hacerlo, las menciono en orden de ser la mejor manera ...

Forma 1-HTML:

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

2-forma Javascript:

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

3-jQuery forma:

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

Solo uso 'new-password'en su lugar 'off'en autocompletar.

y también intenté usar este código y funciona (al menos de mi parte), uso WP y GravityForm para su información

$('input').attr('autocomplete','new-password');

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