Esiste un modo valido W3C per disabilitare il completamento automatico in un modulo HTML?

424

Quando si utilizza il xhtml1-transitional.dtddoctype, raccogliere un numero di carta di credito con il seguente codice HTML

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

indicherà un avviso sul validatore W3C:

non esiste alcun attributo "completamento automatico".

Esiste un modo W3C / standard per disabilitare il completamento automatico del browser su campi sensibili in un modulo?

— opaco b
fonte

10

Sei sicuro che fare confusione con l'impostazione di completamento automatico dell'utente è ciò che vuoi fare? Se lo hanno acceso, probabilmente gli piace. Il completamento automatico è una funzionalità completamente lato browser, proprio come il pulsante che consente all'utente di modificare la dimensione del carattere, ecc. Non dovresti interferire con i loro desideri

— rmeador,

113

Anche per qualcosa di sensibile come il numero di carta di credito? Non riesco a pensare a molte persone che vorrebbero che fossero ricordate, soprattutto perché il completamento automatico è attivo per impostazione predefinita nella maggior parte dei browser. Se lo vogliono ricordare così male, possono usare qualcosa che compila moduli come la barra degli strumenti di Google.

— matt b

13

Il mio caso d'uso è leggermente diverso: sto eseguendo il mio completamento automatico e non voglio che si scontrino con quello del browser. Ho appena scoperto che il completamento automatico = "off" non è valido, ma sembra che non ci sia altra soluzione semplice (iniettarlo con js è semplicemente stupido)

— thepeer,

13

@rmeador perché a volte vogliamo fornire un'alternativa più user-friendly alla casella di suggerimento automatico standard. @corydoras, per favore, non spingere il tuo peso OSX in giro, non è utile per la risoluzione di questa domanda.

— Josh M.

12

Il problema è che le banche riterranno il commerciante responsabile in caso di transazione fraudolenta ... anche se è colpa del cliente al 100%. Pertanto, in alcune circostanze, è legittimo disabilitare la funzione per il cliente.

— Alexandre H. Tremblay,

422

Ecco un buon articolo del MDC che spiega i problemi (e le soluzioni) per la compilazione automatica. Microsoft ha pubblicato qualcosa di simile qui , pure.

Ad essere onesti, se questo è qualcosa di importante per i tuoi utenti, "rompere" gli standard in questo modo sembra appropriato. Ad esempio, Amazon usa un po 'l'attributo' completamento automatico 'e sembra funzionare bene.

Se si desidera rimuovere completamente l'avviso, è 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 tuo sito utilizza HTTPS, IE disattiva automaticamente il completamento automatico (come alcuni altri browser, per quanto ne so).

Aggiornare

Dato che questa risposta ottiene ancora parecchi voti, volevo solo sottolineare che in HTML5 è possibile utilizzare l'attributo 'completamento automatico' sull'elemento del modulo. Vedi la documentazione su W3C per questo.

— Nick Presta
fonte

41

Sembra che Firefox non disattivi il completamento automatico su https, ma questa è una conoscenza utile. Grazie!

— matt b

3

Safari non rispetta l'attributo autocomplete = "off". Vedere stackoverflow.com/questions/22817801/...

— Skurpi

1

autocompletepuò essere usato non solo formsull'elemento , e il offvalore funziona almeno inchromium-40.0.2214.115

— x-yuri il

Sembra che il w3c stia espandendo gli standard per il completamento automatico in HTML5.1 (in bozza a partire da questo commento) w3c.github.io/html/…

— Justin Nafe

1

Se non funziona nulla, utilizza textarea anziché la casella di testo per disattivare il completamento automatico.

— Bsienn,

64

Sarei molto sorpreso se il W3C avesse proposto un modo che avrebbe funzionato con (X) HTML4. La funzione di completamento automatico è interamente basata su browser ed è stata introdotta negli ultimi anni (ben dopo la stesura dello standard HTML4).

Non sarebbe sorpreso se HTML5 ne avesse uno, però.

Edit: Come pensavo, HTML5 ha avere quella caratteristica. Per definire la tua pagina come HTML5, usa il seguente doctype (ovvero: inserisci questo come primo testo nel tuo codice sorgente). Nota che non tutti i browser supportano questo standard, poiché è ancora in bozza.

<!DOCTYPE html>

— Henrik Paul
fonte

7

Tutti i browser prevedono che le versioni precedenti di Konqueror lo supportino. Anche IE6 lo supporta. È il tipo di documento da utilizzare.

— BalusC

56

HTML 4 : No

HTML 5 : Sì

L'attributo di completamento automatico è un attributo enumerato. L'attributo ha due stati. La parola chiave on è mappata sullo stato on e la parola chiave off è mappata sullo stato off. L'attributo può anche essere omesso. Il valore mancante predefinito è lo stato on . Lo stato off indica che per impostazione predefinita, i controlli del modulo nel modulo avranno il nome del campo di compilazione automatica impostato su off ; lo stato on indica che, per impostazione predefinita, i controlli del modulo nel modulo avranno il autofillnome del campo impostato su "on".

Riferimento: W3

— RuudKok
fonte

@ freestock.tk Sì, è più chiaro di tutti gli altri. La semplicità conta.

— OverCoder

32

No, ma il completamento automatico del browser viene spesso attivato dal campo con lo stesso nameattributo dei campi precedentemente compilati. Se potessi trovare un modo intelligente per avere un nome di campo randomizzato , il completamento automatico non sarebbe in grado di estrarre i valori precedentemente immessi per il campo.

Se dovessi dare a un campo di input un nome come " email_<?= randomNumber() ?>", e quindi avere lo script che riceve questo ciclo di dati attraverso le variabili POST o GET alla ricerca di qualcosa che corrisponda al modello " email_[some number]", potresti farlo, e questo avrebbe ( praticamente) successo garantito, indipendentemente dal browser .

— Phantom Watson
fonte

6

Ciò renderebbe più difficile il test automatico.

— David Waters,

14

Renderebbe più difficile il test automatico, solo se il tuo software di test non è in grado di controllare i campi di lettura / lettura a cui potrebbe essere aggiunto un numero casuale. Potrebbe essere il momento di aggiornare il tuo software di test automatizzato.

— corydoras,

8

Le informazioni sul completamento automatico verrebbero comunque salvate nella directory dei dati del browser, no?

— Joey Adams,

2

Presumibilmente. Ma non ci si aspetterebbe mai di riapparire in realtà all'utente.

— Phantom Watson,

1

Chrome ora utilizza l'attributo type = "password" anziché l'attributo name per un determinato sito. Ho name = "newpassword" autocomplete = 'off' type = "password" e si riempie automaticamente! Se cambio tipo, nessuna compilazione automatica

— Enigma Plus,

31

No, un buon articolo è qui su Mozila Wiki .

Continuerei a utilizzare l'invalido attribute. Penso che sia qui che il pragmatismo dovrebbe vincere sulla convalida.

— David Waters
fonte

23

Che ne dici di impostarlo con JavaScript?

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

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

— Greg
fonte

8

L'uso di JavaScript come soluzione alternativa agli errori di convalida è come spazzare la polvere sotto il tappeto. Mentre il documento HTML può diventare valido, la pagina HTML + JS risultante non lo sarà.

— fregante,

19

Suggerisco di catturare tutti e 4 i tipi di input:

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

Riferimento:

— Malartre
fonte

3

potrebbe usare :inputanche

— Ascherer

11

Se usi jQuery, puoi fare qualcosa del genere:

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

e usa la classe autocompleteOff dove vuoi:

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

Se vuoi che TUTTI i tuoi input siano autocomplete=off, puoi semplicemente usarli:

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

— totoche
fonte

4

L'uso del doctype HTML5 è più semplice e migliore.

— BalusC

5

questo non è comunque html veramente valido, sta solo impostando l' autocompleteattributo (non valido) in un modo diverso rispetto a quello dell'html

— matt b

Questo codice non funziona per me; Ho usato $('input.autocompleteOff').val('');che sembra essere OK.

— dqd

5

L'uso di JavaScript come soluzione alternativa agli errori di convalida è come spazzare la polvere sotto il tappeto. Mentre il documento HTML può diventare valido, la pagina HTML + JS risultante non lo sarà.

— fregante,

8

Un altro modo - che aiuterà anche con la sicurezza è quello di chiamare la casella di input qualcosa di diverso ogni volta che lo visualizzi: proprio come un captha. In questo modo, la sessione può leggere l'input solo una volta e il completamento automatico non ha nulla da fare.

Solo un punto riguardo alla domanda di rmeador se dovresti interferire con l'esperienza del browser: sviluppiamo sistemi di gestione dei contatti e CRM e quando digiti i dati di altre persone in un modulo non vuoi che suggeriscano costantemente i tuoi dettagli.

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

autocomplete='off'

— Enigma Plus
fonte

8

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 attuali versioni dei browser Gecko, l'attributo di completamento automatico funziona perfettamente. Per le versioni precedenti, tornando a Netscape 6.2, funzionava con l'eccezione dei moduli con "Indirizzo" e "Nome"

Aggiornare

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

autocomplete="nope"

Poiché questo valore casuale non è a valid one , il browser si arrenderà.

documetation

— Emilio Gort
fonte

I browser moderni non rispettano il completamento automatico = disattivato per scelta. :/ Purtroppo.

— Alessio

@Alexus ha aggiunto alcuni aggiornamenti ... cambio internet molto veloce

— Emilio Gort,

6

L'uso di un attributo 'name' casuale funziona per me.

Ho reimpostato l'attributo name quando invio il modulo in modo che tu possa ancora accedervi per nome quando il modulo viene inviato. (utilizzando l'attributo id per memorizzare il nome)

— opznhaarlems
fonte

5

Si noti che c'è un po 'di confusione sulla posizione dell'attributo di completamento automatico. Può essere applicato all'intero tag FORM o ai singoli tag INPUT, e questo non era realmente standardizzato prima di HTML5 (che consente esplicitamente entrambe le posizioni ). I documenti più vecchi, in particolare questo articolo di Mozilla, menzionano solo il tag FORM. Allo stesso tempo, alcuni scanner di sicurezza cercheranno solo il completamento automatico nel tag INPUT e si lamenteranno se manca (anche se si trova nel FORM principale). Un'analisi più dettagliata di questo pasticcio è pubblicata qui: Confusione sugli attributi AUTOCOMPLETE = OFF nei moduli HTML .

— kravietz
fonte

3

Non è l'ideale, ma potresti cambiare l'id e il nome della casella di testo ogni volta che lo esegui il rendering - dovresti rintracciarlo anche sul lato server in modo da poter ottenere i dati.

Non sono sicuro che funzionerà o meno, era solo un pensiero.

— Kieron
fonte

2

Penso che ci sia un modo più semplice. Crea un input nascosto con un nome casuale (tramite javascript) e imposta il nome utente su quello. Ripeti con la password. In questo modo lo script back-end sa esattamente qual è il nome del campo appropriato, mantenendo il completamento automatico al buio.

Probabilmente sbaglio, ma è solo un'idea.

— Serpenti e caffè
fonte

2

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");
        }
    }
}

— Jack Tuck
fonte

-1

Questa soluzione funziona con me:

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

se vuoi usare il riempimento automatico in quest'area: aggiungi l' autocomplete="false"elemento ex:

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

— Hưng Trịnh
fonte

-5

Completamento automatico valido disattivato

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

— Southampton Web Design
fonte

13

sicuramente se un utente avesse JS spento, non potrebbe completare un ordine in quanto non può inserire il numero della sua carta? Meglio integrare l'attributo tramite JS direi - nel peggiore dei casi, JS off dà al campo del numero di carta il potenziale per il completamento automatico, ma almeno possono effettuare un ordine ... solo un pensiero :)

— Terry_Brown

3

Questo non è nemmeno divertente.

— Ricardo Pieper,