Chrome 未触发信用卡自动填充

Question

我遵循了 this other Stack Overflow post and used a pattern found in 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

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

http://jsfiddle.net/7b6xtns7/（没有渲染，有点乱）

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

之后

http://jsfiddle.net/c86Lmo0L/

Answer 2

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

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

我还注意到，如果缺少一个抄送字段，Chrome 将不会自动完成。

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

Answer 3

被接受的答案很好，我想我会补充一些关于 React 的文档和注释（为此问题标记）..

React 要求您将属性作为 autoComplete="cc-number"（注意驼峰式）传递，否则它将默认为 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 未触发信用卡自动填充

Chrome credit card autofill not being triggered

javascript

google-chrome

credit-card

reactjs