Non è stato attivato il riempimento automatico della carta di credito di Chrome

Ho seguito il consiglio dato in this other Stack Overflow post e ho utilizzato uno schema trovato in the list of regexes used by Chrome, ma per qualche motivo Chrome non rileva ancora che il mio campo è un campo di credito.Non è stato attivato il riempimento automatico della carta di credito di Chrome

Safari lo rileva perfettamente.

Ecco il codice HTML di input, come dimostra l'ispettore web:

<input class="control" id="card_number" type="tel" name="card_number" 
    value="" autocorrect="off" spellcheck="off" autocapitalize="off" 
    placeholder="Card number" data-reactid=".0.1.1.0.0.5.0.0" 
    x-autocompletetype="cc-number" autocompletetype="cc-number">

Sì, come si può vedere dalla data-reactid, sto usando reagire. Forse questo ha qualcosa a che fare con questo. Chissà!

Ho impostato una pagina di prova in modo che altri possano giocarci. Puoi visitare https://entire.life/payment-form-test in Safari e (se hai attivato la compilazione automatica e una carta di credito salvata), verrà visualizzato. Se lo visiti in Chrome, non verrà visualizzata l'opzione di riempimento automatico. Anche dopo aver digitato la prima lettera della tua carta.

Questo codice è open source. È possibile visualizzare la sorgente per la pagina /payment-form-testhere.

fonte

2015-08-29 chadoh

Sì, è strano.Puoi vedere una [demo di lavoro qui] (https://greenido.github.io/Product-Site-101/form-cc-example.html) dove CC# verrà completato automaticamente per te in Chrome. Mi chiedo se abbia qualcosa a che fare con te usando 'type =" tel "' ma spero di no. – idbehold

Ah, mi è sembrato che valesse la pena provare, @idhold, ma non era il problema. L'ho cambiato in 'type =" text "', ma il problema persiste. Il che ha senso! Ho copiato gli attributi dell'elemento di input, 'type =" tel "' e tutto, da [Esempio di Stripe's Checkout] (https://stripe.com/docs/tutorials/checkout). Sarebbe stato strano se causasse un problema per me e non per loro! Dobbiamo cercare nel posto sbagliato. : - / – chadoh

Funzionerà se si aggiunge seguenti attributi a rispettivi elementi di input:

autocomplete="cc-number"
autocomplete="cc-exp"
autocomplete="cc-csc"

Inoltre, ho notato che Chrome non si completerà automaticamente se manca uno dei campi cc.

si può giocare qui - https://jsfiddle.net/q4gz33dg/2/

fonte

2015-09-03 00:10:55 tiblu

Nome i campi di scadenza card_expiry_month e card_expiry_year. Non sono sicuro del motivo per cui i tuoi nomi attuali non attivano la regex, ma cambiare i nomi sembra funzionare.

http://jsfiddle.net/7b6xtns7/ (è un po 'confuso in quanto non è resa)

Edit: Sembra che l'ordinazione ha a che fare con esso anche. Se questo non funziona prova a mettere il mese/giorno subito dopo il campo di immissione del numero

http://jsfiddle.net/c86Lmo0L/

fonte

2015-09-02 23:52:19 arcyqwerty

La risposta accettata è grande, ho pensato solo carillon con un po 'di documentazione e una nota relativa reagire (tag per questa domanda) ..

Reagire richiede per passare l'attributo come autoComplete="cc-number" (nota camelCase), altrimenti verrà impostato su autocomplete="off".

Maggiori informazioni: