Vorrei sapere se esiste una sorta di markup speciale per abilitare la funzione di compilazione automatica di Chrome per un modulo specifico. Ho trovato solo domande su come disabilitarlo, ma vorrei sapere se posso aggiungere qualche tipo di markup al codice html per dire al browser "questo è l'input per l'indirizzo" o "questo è il codice postale campo "per riempirlo correttamente (presupponendo che l'utente abbia attivato questa funzione).
Risposte:
AGGIORNAMENTO per il 2017: sembra che la risposta di Katie abbia informazioni più aggiornate della mia. Lettori futuri: dai il tuo voto positivo alla sua risposta .
Questa è una grande domanda e una per la quale la documentazione è sorprendentemente difficile da trovare. In realtà, in molti casi scoprirai che la funzionalità di compilazione automatica di Chrome "funziona". Ad esempio, il seguente frammento di HTML produce un modulo che, almeno per me (Chrome v. 18), viene automaticamente compilato dopo aver fatto clic nel primo campo:
<!DOCTYPE html>
<html>
<body>
<form method="post">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="text" name="email" /><br />
Phone: <input type="text" name="phone" /><br />
Address: <input type="text" name="address" /><br />
</form>
</body>
</html>Tuttavia, questa risposta è insoddisfacente, in quanto lascia la soluzione nel regno della "magia". Scavando più a fondo ho appreso che Chrome (e altri browser abilitati al riempimento automatico) si basano principalmente su indizi contestuali per determinare il tipo di dati che dovrebbero essere compilati negli elementi del modulo. Esempi di tali indizi contestuali includono ilname di un elemento di input, il testo che circonda l'elemento e qualsiasi testo segnaposto.
Di recente, tuttavia, il team di Chrome ha riconosciuto che si tratta di una soluzione insoddisfacente e ha iniziato a sollecitare la standardizzazione in materia. Un post molto istruttivo del gruppo Google Webmasters ha recentemente discusso questo problema, spiegando:
Sfortunatamente, finora è stato difficile per i webmaster garantire che Chrome e altri fornitori di moduli possano analizzare correttamente il loro modulo. Esistono alcuni standard; ma gravano onerosamente sull'implementazione del sito Web, quindi in pratica non vengono utilizzati molto.
(Gli "standard" a cui fanno riferimento sono una versione più recente delle specifiche menzionate nella risposta di Avalanchis sopra).
Il post di Google continua descrivendo la soluzione proposta (che viene soddisfatta da critiche significative nei commenti del post). Propongono l'uso di un nuovo attributo a questo scopo:
Basta aggiungere un attributo all'elemento di input, ad esempio un campo dell'indirizzo e-mail potrebbe apparire come:
<input type=”text” name=”field1” x-autocompletetype=”email” />
... dove x-sta per "sperimentale" e verrà rimosso se e quando questo diventerà uno standard. Leggi il post per maggiori dettagli, o se vuoi approfondire, troverai una spiegazione più completa della proposta sul wiki di whatwg .
AGGIORNAMENTO:
Come indicato in queste risposte perspicaci , è possibile trovare tutte le espressioni regolari utilizzate da Chrome per identificare / riconoscere i campi comuni . Quindi, per rispondere alla domanda originale, assicurati solo che i nomi dei tuoi campi html corrispondano a queste espressioni. Alcuni esempi includono:autofill_regex_constants.cc.utf8
"first.*name|initials|fname|first$""last.*name|lname|surname|last$|secondname|family.*name""e.?mail""address.*line|address1|addr1|street""zip|postal|post.*code|pcode|^1z$"Questa domanda è piuttosto vecchia ma ho una risposta aggiornata !
Ecco un link alla documentazione WHATWG per abilitare il completamento automatico.
Google ha scritto una guida molto carina per lo sviluppo di applicazioni Web che sono amichevoli per i dispositivi mobili. Hanno una sezione su come nominare gli input sui moduli per usare facilmente il riempimento automatico. Anche se è scritto per dispositivi mobili, questo vale sia per desktop che per dispositivi mobili!
Ecco alcuni punti chiave su come abilitare il completamento automatico:
<label>per tutti i tuoi <input>campiautocompleteattributo ai <input>tag e compila utilizzando questa guida .namee autocompleteper tutti i <input>tagEsempio :
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name@example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel"><input>tagPer attivare il completamento automatico, assicurati di nominare correttamente gli attributi namee autocompletenei <input>tag. Ciò consentirà il completamento automatico dei moduli. Assicurati anche di avere un <label>! Questa informazione può anche essere trovata qui .
Ecco come nominare i tuoi input:
name:name fname mname lnameautocomplete:
name (per nome completo)given-name (per nome)additional-name (per secondo nome)family-name (per cognome)<input type="text" name="fname" autocomplete="given-name">name:emailautocomplete:email<input type="text" name="email" autocomplete="email">name:address city region province state zip zip2 postal country autocomplete:
street-addressaddress-line1address-line2address-level1 (Stato o Provincia)address-level2 (città)postal-code (Cap)countryname:phone mobile country-code area-code exchange suffix extautocomplete:telname:ccname cardnumber cvc ccmonth ccyear exp-date card-typeautocomplete:
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename:usernameautocomplete:usernamename:passwordautocomplete:
current-password (per i moduli di accesso)new-password (per i moduli di iscrizione e modifica password)Dal mio test, il x-autocompletetag non fa nulla. Utilizza invece i autocompletetag sui tag di input e imposta i loro valori in base alle specifiche HTML qui http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms. html # campo di compilazione automatica .
Esempio:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>Il tag del modulo padre deve essere completato automaticamente = "on" e method = "POST".
on , offo default. Quindi questo è markup non valido e sarà soggetto a incongruenze. In realtà penso che il posizionamento nell'attributo di completamento automatico sia irrilevante. Immagino che guardi tutti gli attributi e il completamento automatico sembra essere uno di quelli che controlla.
Devi nominare gli elementi in modo appropriato in modo che il browser li riempia automaticamente.
Ecco le specifiche IETF per questo:
Ho appena giocato in giro con le specifiche e ho ottenuto un buon esempio funzionante, inclusi alcuni campi in più.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form autocomplete="on" method="POST">
<fieldset>
<legend>Ship the blue gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ba
autocomplete="section-blue shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-blue shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=bp
autocomplete="section-blue shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>Ship the red gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="section-red shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-red shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="section-red shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>payment address</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="billing street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="billing address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="billing postal-code">
</label>
</p>
</fieldset>
<input type="submit" />
</form>
</body>
</html>Contiene 2 aree di indirizzi separate e anche diversi tipi di indirizzo. Testato anche su iOS 8.1.0 e sembra che riempia sempre tutti i campi contemporaneamente, mentre il desktop automatico si riempie automaticamente di indirizzo per indirizzo.
Sembra che avremo un maggiore controllo su questa funzione di compilazione automatica, c'è una nuova API sperimentale in arrivo su Chrome Canary, che può essere utilizzata per accedere ai dati dopo averlo chiesto all'utente:
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
nuove informazioni da google:
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
Ecco la vera risposta:
Questo funziona: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
Questo non: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
L'unica differenza è nell'etichetta stessa. "Nom" deriva da "Nome" o "Nome" in portoghese.
Quindi ecco di cosa hai bisogno:
<label for="id_of_field">Name</label><input id="id_of_field"></input>Niente di più.
Ecco il nuovo elenco di "nomi" di riempimento automatico di Google. Esistono tutti i nomi supportati in qualsiasi lingua consentita.
Google ora fornisce la documentazione per questo:
e
Nel mio caso, $('#EmailAddress').attr('autocomplete', 'off');non ha funzionato. Ma in seguito funziona su Chrome versione 67 di jQuery.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');