Disabilita il completamento automatico tramite CSS

È possibile utilizzare CSS per disabilitare il completamento automatico su un elemento del modulo (in particolare un campo di testo)?

Uso una libreria di tag che non consente l'elemento di completamento automatico e vorrei disabilitare il completamento automatico senza utilizzare Javascript.

Puoi utilizzare un generato ide nameogni volta, che è diverso, quindi il browser non può ricordare questo campo di testo e non suggerirà alcuni valori.

Questa è almeno l'alternativa sicura per tutti i browser, ma consiglierei di andare con la risposta di RobertsonM ( autocomplete="off").

Allo stato attuale, non esiste alcun attributo "completamento automatico disattivato" in CSS. Tuttavia, html ha un codice semplice per questo:

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

Se stai cercando un effector a livello di sito, uno facile sarebbe semplicemente avere una funzione js per eseguire tutti gli "input" e aggiungere questo tag, o cercare la classe / id css corrispondente.

L'attributo di completamento automatico funziona bene in Chrome e Firefox (!), Ma vedi anche Esiste un modo valido W3C per disabilitare il completamento automatico in un modulo HTML?

puoi facilmente implementare da jQuery

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

Se stai usando a formpuoi disabilitare tutti i completamenti automatici con,

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

CSS non ha questa capacità. Dovresti usare lo scripting lato client.

Ho provato tutti i modi suggeriti da questa domanda, risposte e altri articoli nel web, ma non funziona comunque. Ho provato autocomplete = "new-random-value", autocomplete = "off" nell'elemento form, utilizzando lo script lato client come sotto ma al di fuori di $ (document) .ready () come uno degli utenti menzionati:

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

Ho trovato forse un'altra priorità nel browser a causa di questo strano comportamento! Quindi ho cercato di più e, infine, ho letto di nuovo attentamente sotto le righe di questo buon articolo :

Per questo motivo, molti browser moderni non supportano autocomplete = "off" per i campi di accesso:

Se un sito imposta il completamento automatico = "off" per a e il modulo include campi di immissione nome utente e password, il browser offrirà comunque di ricordare questo accesso e, se l'utente accetta, il browser riempirà automaticamente quei campi la prossima volta che l'utente visita la pagina. Se un sito imposta il completamento automatico = "off" per i campi del nome utente e della password, il browser offrirà comunque di ricordare questo accesso e, se l'utente accetta, il browser riempirà automaticamente quei campi la prossima volta che l'utente visita la pagina. Questo è il comportamento in Firefox (dalla versione 38), Google Chrome (dalla versione 34) e Internet Explorer (dalla versione 11).

Se stai definendo una pagina di gestione utenti in cui un utente può specificare una nuova password per un'altra persona, e quindi vuoi impedire il riempimento automatico dei campi password, puoi usare autocomplete = "new-password" ; tuttavia, il supporto per questo valore non è stato implementato su Firefox.

Ha appena funzionato. Ho provato specialmente in Chrome e spero che continui a funzionare e aiuti gli altri.

Ho risolto il problema aggiungendo un falso nome di completamento automatico per tutti gli input.

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

Grazie alla soluzione di @ ahhmarr sono stato in grado di risolvere lo stesso problema nel mio ambiente Angular + ui-router , che condividerò qui per chiunque sia interessato.

Nel mio index.htmlho aggiunto il seguente script:

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

Quindi, per coprire i cambiamenti di stato, ho aggiunto quanto segue nel mio controller di root:

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

I timeout sono per il rendering di html prima di applicare jquery.

Se trovi una soluzione migliore, fammelo sapere.

Non puoi usare CSS per disabilitare il completamento automatico, ma puoi usare HTML:

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

Tecnicamente puoi sostituire falsecon qualsiasi valore non valido e funzionerà. Questo iOS è l'unica soluzione che ho trovato che funziona anche in Edge.

Ci sono 3 modi per farlo, li menziono per essere il modo migliore ...

Modo 1-HTML:

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

Modalità 2-Javascript:

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

Modo 3-jQuery:

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

Uso solo 'new-password'invece 'off'il completamento automatico.

e ho anche provato a usare questo codice e funziona (almeno da parte mia), uso WP e GravityForm per le tue informazioni

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

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