文本框不显示正常的 Google Chrome 信用卡检测

Question

使用 Google Chrome 时，结帐页面上的信用卡文本框无法正常显示选择现有信用卡的功能。我确实按照 Google 的建议设置了“自动完成类型”。

是不是因为“asp.net”样式id字段长？

<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

它工作正常，但您需要信用卡上的名称作为第一个输入字段，chrome 使用它来自动完成其余部分。除了x-autocompletetype 之外，还可以使用autocomplete 来支持其他版本的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">

查看我的 jsfiddle：https://jsfiddle.net/c3ck1uxc/1/