未触发 Chrome 信用卡自动填充

Posted 2023-02-22

【中文标题】未触发 Chrome 信用卡自动填充

【英文标题】：Chrome credit card autofill not being triggered

【发布时间】：2015-11-24 04:52:21

【问题描述】：

我遵循了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 的来源。

【问题讨论】：

是的，这很奇怪。您可以看到 working demo here，其中 CC# 将在 Chrome 中为您自动完成。我想知道这是否与您使用type="tel" 有任何关系，但我希望不会。

啊，这似乎值得一试，@idbehold，但这不是问题所在。我将其更改为type="text"，但问题仍然存在。这是有道理的！我从Stripe's Checkout example 复制了输入元素属性type="tel" 和所有属性。如果它给我而不是他们造成了问题，那就太奇怪了！我们一定是找错地方了。 :-/

【参考方案1】：

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

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

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

http://jsfiddle.net/c86Lmo0L/

【参考方案2】：

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

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

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

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

【讨论】：

似乎是“我还注意到，如果缺少 cc 字段之一，Chrome 将不会自动完成。”不再相关，只是在 jsfiddle 上进行了测试 - cc-number 的自动完成在独自一人时可以正常工作。

【参考方案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