javascript - 未触发 Chrome 信用卡自动填充

Question

我遵循了 this other Stack Overflow post 中给出的建议并使用了在 the list of regexes used by 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。也许这与它有关。谁知道!

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

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

Answer 1

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

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

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

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