Chrome信用卡自动填充功能未被触发

Question

我按照其他Stack Overflow帖子中给出的建议使用了Chrome使用的正则表列表中的模式,但由于某些原因,Chrome仍未检测到我的字段是信用卡字段.

Safari检测到它很好.

这是输入HTML,如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">

是的,正如您所看到的data-reactid,我正在使用React.也许这与它有关.谁知道!

我已经设置了一个测试页面,以便其他人可以使用它.您可以在Safari中访问https://entire.life/payment-form-test,并且(如果您启用了自动填充并保存了信用卡),它将会弹出.如果您在Chrome中访问它,则不会弹出自动填充选项.即使在输入卡的第一个字母后.

此代码是开源的.您可以在此处查看该/payment-form-test页面的来源.

Answer 1

如果将以下属性添加到相应的输入元素,它将起作用:

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

另外,我注意到如果其中一个cc字段丢失,Chrome将无法自动完成.

你可以在这里玩 - https://jsfiddle.net/q4gz33dg/2/