Question

我按照this other Stack Overflow post中提供的建议使用the list of regexes used by Chrome中的模式，但由于某些原因，Chrome仍未检测到我的字段是信用卡字段。

Safari检测到它就好了。

这里是输入HTML，如网络检查员所示：

<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页面here的来源。

Answer 1

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

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

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

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

Answer 2

将过期字段命名为card_expiry_month和card_expiry_year。我不确定为什么你现在的名字不会触发正则表达式，但更改名称似乎有效。

http://jsfiddle.net/7b6xtns7/（因为它没有渲染，所以有点乱）

编辑：看起来订购也与它有关。如果这不起作用，请尝试在数字输入字段

之后立即放置月份/日期

http://jsfiddle.net/c86Lmo0L/

Answer 3

接受的答案很棒，我想我只是写了一些文档和关于React的注释（标记为这个问题）..

React要求您将属性作为autoComplete="cc-number"传递（注意camelCase），否则默认为autocomplete="off"。

更多信息：

反应属性：https://facebook.github.io/react/docs/tags-and-attributes.html
有用的例子：https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
https://html.spec.whatwg.org/multipage/forms.html#autofill

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

3 个答案: