C'è un modo valido W3C per disattivare il completamento automatico in un form HTML?

https://stackoverflow.com/questions/582244

06-09-2019
|

Domanda

Quando si utilizza il doctype xhtml1-transitional.dtd, la raccolta di un numero di carta di credito con il seguente codice HTML

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

contrassegnerà un avviso sul validatore W3C:

Non c'è attributo "autocomplete".

C'è un modo W3C / standard per disabilitare il browser completamento automatico sui campi sensibili in una forma?

Soluzione

Qui è un buon articolo dal MDC, che spiega i problemi (e soluzioni) per formare completamento automatico. Microsoft ha pubblicato qualcosa di simile qui , pure.

Per essere onesti, se questo è qualcosa di importante per gli utenti, 'rompendo' standard in questo modo sembra appropriato. Per esempio, Amazon utilizza il 'completamento automatico' attributo un bel po ', e sembra funzionare bene.

Se si desidera rimuovere l'avviso del tutto, è possibile utilizzare JavaScript per applicare l'attributo ai browser che lo supportano (IE e Firefox sono i browser importanti) utilizzando someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Infine, se il vostro sito sta usando HTTPS, IE si spegne automaticamente il completamento automatico (come fanno alcuni altri browser, per quanto ne so).

Aggiorna

Per quanto questa risposta ottiene ancora un bel po 'upvotes, volevo solo far notare che in HTML5, è possibile utilizzare l'attributo 'autocomplete' sul vostro elemento modulo. Vedere la documentazione su W3C per esso.

Altri suggerimenti

Sarei molto sorpreso se il W3C avrebbe proposto un modo che avrebbe lavorato con (X) HTML4. La funzione di completamento automatico è interamente basato su browser, ed è stato introdotto nel corso degli ultimi anni (ben dopo lo standard HTML4 è stato scritto).

Non sarei sorpreso se HTML5 avrebbe avuto uno, però.

Modifica: Come pensavo, HTML5 non hanno questa caratteristica . Per definire la pagina come HTML5, utilizzare il seguente DOCTYPE (cioè: mettere questo come il primo testo nel codice sorgente). Si noti che non tutti i browser supportano questo standard, in quanto è ancora in bozza-modulo.

<!DOCTYPE html>

HTML 4 : No

HTML 5 : Sì

L'attributo di completamento automatico è un attributo enumerato. l'attributo ha due stati. Il mappe di parole chiave al di Stato, e il off mappe di parole chiave allo stato off. L'attributo può anche essere omessa. Il manca di default il valore è il Stato. Il off Stato indica che entro il di default, i controlli dei moduli in forma avranno il loro riempimento automatico nome del campo impostato su off ; stato ON indica che per default, formano controlli la forma avranno il loro autofill nome del campo impostato su "on".

Riferimento: W3

No, ma il browser di completamento automatico è spesso innescato dal campo avendo lo stesso attributo name come campi che prima erano compilati. Se si potrebbe mettere su un modo intelligente per avere un nome del campo randomizzato , completamento automatico non sarebbe in grado di tirare i valori inseriti in precedenza per il campo.

Se si dovesse dare un campo di input un nome come "email_<?= randomNumber() ?>", e quindi avere lo script che riceve questo ciclo di dati attraverso il POST o GET variabili alla ricerca di qualcosa che corrisponde al modello "email_[some number]", si potrebbe tirare fuori questo, e questo avrebbe (praticamente) successo garantito, indipendentemente dal browser .

No, un buon articolo è qui, in Mozila Wiki .

Vorrei continuare a utilizzare il attribute valido. Penso che questo è dove il pragmatismo dovrebbe conquistare la convalida.

Come sull'impostazione con JavaScript?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

Non è perfetto, ma il codice HTML sarà valido.

Suggerisco di prendere tutti e 4 i tipi di input:

$('form,input,select,textarea').attr("autocomplete", "off");

Riferimento:

Se si utilizza jQuery, si può fare qualcosa di simile:

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

e utilizzare la classe autocompleteOff in cui si desidera:

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

Se si desidera che tutti i ingresso da autocomplete=off, si può semplicemente utilizzare che:

$(document).ready(function(){$("input").attr("autocomplete","off");});

Un altro modo - che aiuterà anche con la sicurezza è quello di chiamare la casella di immissione qualcosa di diverso ogni volta che si visualizza è: proprio come un Captha. In questo modo, la sessione può leggere quello che una volta solo l'ingresso e la funzione di completamento automatico non ha nulla a andare avanti.

Solo un punto per quanto riguarda la domanda di rmeador dal fatto che si dovrebbe interferire con l'esperienza del browser: Sviluppiamo sistemi di contatto Management & CRM, e quando si sta digitando i dati di altre persone in una forma che si non vogliamo costantemente suggerendo i propri dati .

Questo funziona per le nostre esigenze, ma poi abbiamo il lusso di dire agli utenti di ottenere un browser decente:)

autocomplete='off'

autocomplete="off" questo dovrebbe risolvere il problema per tutti i browser moderni.

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

Nelle versioni attuali di browser Gecko, l'attributo autocomplete funziona perfettamente. Per le versioni precedenti, tornando a Netscape 6.2, ha funzionato con l'eccezione per le forme con "Indirizzo" e "Nome"

Aggiorna

In alcuni casi, il browser continuerà a suggerire valori di completamento automatico, anche se l'attributo di completamento automatico è disattivata. Questo comportamento imprevisto può essere abbastanza sconcertante per gli sviluppatori. Il trucco per davvero costringendo il mancato completamento automatico è assegnare una stringa casuale all'attributo , ad esempio:

autocomplete="nope"

Dal momento che questo valore casuale non è un valid one, il browser si arrende.

documetation

Utilizzando un attributo casuale 'nome' funziona per me.

I ha ripristinato l'attributo name quando si invia il modulo in modo da poter ancora accedervi per nome quando il modulo viene inviato. (Usando l'attributo id per memorizzare il nome)

Si noti che c'è una certa confusione sulla posizione dell'attributo completamento automatico. Può essere applicato sia a tutto il tag FORM o ai singoli tag input, e questo non era standardizzata prima HTML5 (che consente in modo esplicito sia posizioni ). Documenti più vecchi in particolare questo articolo Mozilla menziona solo tag FORM. Allo stesso tempo, alcuni scanner di sicurezza saranno guardare solo per il completamento automatico in tag INPUT e si lamentano se manca (anche se è nella forma del genitore). Un'analisi più dettagliata di questo pasticcio è pubblicata qui: Confusione autocomplete = OFF attributi in moduli HTML

Non è l'ideale, ma si potrebbe cambiare l'id e il nome della casella di testo ogni volta che si esegue il rendering -. Dovreste seguirlo lato server troppo così si potrebbe ottenere i dati fuori

Non sono sicuro se questo funzionerà o no, era solo un pensiero.

Credo che ci sia un modo più semplice. Creare un ingresso nascosto con un nome casuale (tramite JavaScript) e impostare il nome utente per questo. Ripetere con la password. In questo modo lo script di backend sa esattamente quello che il nome del campo appropriato è, mantenendo completamento automatico nel buio.

Sono probabilmente sbagliato, ma è solo un'idea.

if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}

Questa soluzione funziona con me:

$('form,input,select,textarea').attr("autocomplete", "nope");

se si desidera utilizzare il riempimento automatico in questa regione: aggiungere autocomplete="false" nell'elemento es:

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">

completamento automatico valido off

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow