如何让Chrome提示保存信用卡条目以进行自动填充

时间:2016-06-25 02:08:42

标签: google-chrome autocomplete autofill

我正在实施您的平均SSL安全支付表单,并且我已经能够让Chrome始终从已登录的Google帐户自动填充存储的信用卡条目。但是,我无法找到神奇的一系列位和配置来强制它提示我保存新的信用卡条目。

让我们看一组精简的付款字段:

<form action="/someroute" method="post" id="pmntForm" autocomplete="on">
    <h2>Auto Fill Test</h2>

    <label for="nameoncard">Name on Card</label>
    <input type="text" id="nameoncard" name="nameoncard" autocomplete="cc-name">

    <label for="ccnumber">Credit Card Number</label>
    <input type="text" id="ccnumber" name="ccnumber" autocomplete="cc-number" />

    <label for="cc-exp-month">Expiration Month</label>
    <input type="number" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">

    <label for="cc-exp-year">Expiration Year</label>
    <input type="number" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">

    <label for="cvv">CVV</label>
    <input type="text" id="cvv" name="cvv" autocomplete="cc-csc">

    <input type="submit" value="Submit" name="submit">
</form>

这正是我想要在Chrome帐户中自动填充现有卡片所需的内容:

Auto Fill Test, it works!

但是,如果我输入一整套新的付款数据;我希望在用户点击提交时 - Chrome会提示将数据保存为新的信用卡条目(具有讽刺意味的是,此图片来自某人想要禁用此信息的帖子):

Prompt to save Credit Card

1 个答案:

答案 0 :(得分:1)

这里有一个反应灵巧,但它应该回答你的问题。

Jsfiddle

<form name="ccform" action="">
  <input name="cc-number" placeholder="Card Number" autocomplete="cc-number" />
  <input name="cc-csc" placeholder="Security Code (CVC)" autocomplete="cc-csc" />
  <input name="cc-exp-month" placeholder="MM" autocomplete="cc-exp-month" />
  <input name="cc-exp-year" placeholder="YYYY" autocomplete="cc-exp-year" />
</form>

资源:

您还可以使用chrome dev工具查看具有有效自动填充表单的其他网站,例如:

不是完美的答案,但希望它有所帮助!当我找到完全正确的解决方案时,我会更新。 :)