La casella di testo non mostra il normale rilevamento della carta di credito Google Chrome

Question

Quando si utilizza Google Chrome, la casella di testo della carta di credito sulla mia pagina di checkout non mostra la normale capacità di selezionare una carta di credito esistente. Ho impostato il "tipo di completamento automatico" come consigliato da Google.

È dovuto al lungo campo ID stile "asp.net"?

<input name="ctl00$conMain$CheckoutControl1$txtCreditCardNumber" type="text" id="ctl00_conMain_CheckoutControl1_txtCreditCardNumber" title="Credit Card Number " x-autocompletetype="cc-number"> 

https://dia-fundraising-dinner-2015.simpletix.com/Checkout/Guest/Order/df71f52a-f9b9-4dcd-923b-4e2d46bd754a/

Answer 1

Funziona bene, ma si necessità il nome sulla carta di credito come il primo campo di input, Chrome utilizza questo per completare automaticamente il resto. Utilizzare anche autocomplete oltre a x-autocompletetype e supportare altre versioni di chrome.

<input name="ccname" id="frmNameCC" required 
    placeholder="Full Name" autocomplete="cc-name"> 
<input name="ctl00$conMain$CheckoutControl1$txtCreditCardNumber" 
    type="text" id="ctl00_conMain_CheckoutControl1_txtCreditCardNumber" 
    title="Credit Card Number " x-autocompletetype="cc-number" 
    autocomplete="cc-number"> 

Vedi il mio jsfiddle: https://jsfiddle.net/c3ck1uxc/1/