25

在某些表单中，Chrome 自动填充会提示信用卡自动填充。

编辑：添加屏幕截图。这与浏览器自动完成不同。您之前不必以相同的形式输入值。

截屏

我应该如何编写我的 HTML 表单，以便浏览器将它们检测为信用卡字段并触发此行为？

一个使用 Stripe 表单的例子是理想的。

4

5 回答 5

16

这个问题已经很老了，但我有一个2019 年的更新答案！

您现在只需正确命名即可告诉浏览器哪些字段用于信用卡信息<input>。

以下答案来自我在这里的原始答案：https ://stackoverflow.com/a/41965106/1696153

这是官方当前 WHATWG HTML 标准的链接，用于启用自动完成功能。

Google为开发对移动设备友好的 Web 应用程序编写了一个非常好的指南。他们有一节介绍如何命名表单上的输入以轻松使用自动填充。尽管它是为移动设备编写的，但这适用于桌面和移动设备！

如何在 HTML 表单上启用自动完成

以下是有关如何启用自动完成功能的一些要点：

  • 将 a<label>用于所有<input>字段
  • autocomplete为您的标签添加一个属性<input>并使用本指南进行填写。
  • 为所有标签正确命名您的name和autocomplete属性<input>

  • 示例：

    <label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name@example.com" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

如何命名您的<input>标签

为了触发自动完成，请确保正确命名标签中的name和autocomplete属性。<input>这将自动允许在表单上自动完成。确保也有一个<label>！也可以在此处找到此信息。

以下是如何命名您的输入：

  • 姓名
    • 将这些中的任何一个用于name：name fname mname lname
    • 将这些中的任何一个用于autocomplete：
      • name（全名）
      • given-name（对于名字）
      • additional-name（中间名）
      • family-name（对于姓氏）
    • 例子：<input type="text" name="fname" autocomplete="given-name">
  • 电子邮件
    • 将这些中的任何一个用于name：email
    • 将这些中的任何一个用于autocomplete：email
    • 例子：<input type="text" name="email" autocomplete="email">
  • 地址
    • 将这些中的任何一个用于name：address city region province state zip zip2 postal country
    • 将这些中的任何一个用于autocomplete：
      • 对于一个地址输入：
        • street-address
      • 对于两个地址输入：
        • address-line1
        • address-line2
      • address-level1（州或省）
      • address-level2（城市）
      • postal-code（邮政编码）
      • country
  • 电话
    • 将这些中的任何一个用于name：phone mobile country-code area-code exchange suffix ext
    • 将这些中的任何一个用于autocomplete：tel
  • 信用卡
    • 将这些中的任何一个用于name：ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • 将这些中的任何一个用于autocomplete：
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • 用户名
    • 将这些中的任何一个用于name：username
    • 将这些中的任何一个用于autocomplete：username
  • 密码
    • 将这些中的任何一个用于name：password
    • 将这些中的任何一个用于autocomplete：
      • current-password（用于登录表格）
      • new-password（用于注册和密码更改表格）

资源

于 2017-01-31T18:48:44.103 回答
15

从这个答案https://stackoverflow.com/a/9795126/292060看来，Chrome 要么匹配字段名称上的正则表达式模式，要么表单显式使用该x-autocompletetype属性，如下所示（此示例使用“somename”以避免混淆名称匹配的问题）：

<input type="text" name="somename" x-autocompletetype="cc-number" />

实际上，您可以同时选择匹配的名称和 x-autocompletetype：

<input type="text" name="ccnum" x-autocompletetype="cc-number" />

您的屏幕截图中有输入框的视图源吗？这将显示它是否匹配名称或 x-autocompletetype 属性。

我链接到的答案有几个链接以获取更多信息；我没有在这里重复它们。

其他一些评论：

我知道 Chrome 会弹出一个问题是否保存信用卡信息（我没有），但我不知道它是否会弹出该问题，无论它如何检测到它。也就是说，我不确定 Chrome 是否会自动完成信用卡的单独字段以及其他字段，或者是否需要将整个内容保存为信用卡。

你的问题是如何做，而不是是否做。但是从您问题中的评论来看，我同意您可能不想自动填写信用卡字段。就我个人而言，我发现它发生时令人不安，即使知道它在我的浏览器中是本地的（我对 CVV 尤其有这种感觉，当我报告它时会遇到惊人的阻力）。但是，当客户想要使用 Chrome 时，有些帖子会让人感到沮丧，因为 Chrome 设置了信用卡，而网站却阻止了它。

于 2013-03-03T01:24:07.383 回答
11

感谢@goodeye引导我找到正确的答案。

要触发信用卡自动填充，

  1. 必须在您的表单上启用 SSL
  2. 如果启用 SSL，则标准信用卡字段名称的大多数变体都应该可以使用。

这是 Chrome 用于触发检测的正则表达式的链接

于 2013-03-06T22:19:47.740 回答
2

Chromeautocomplete在输入中使用属性进行自动填充。如果还没有，将来可能会被其他浏览器使用。 autocomplete的实际用途是通过指定autocomplete="off". 但是 chrome 使用相同的方式进行自动填充。

自动填充和自动完成是不同的，所以不要混淆。

自动填充是 chrome 用来从 chrome 浏览器的自动填充设置中存储的内容填充表单的工具。

自动完成是所有浏览器用来记住您之前可能以相同形式输入的内容，方法是在您键入时建议值。因此，当您autocomplete="off"在输入上使用时，浏览器会停止建议这些值。

回到解决方案，自动填充可cc-number用于卡号、cc-name持卡人姓名、cc-csccvc 和属性cc-exp中的卡到期日期。autocomplete这是一个与 chrome 自动填充兼容的示例：

<div>
    <label for="frmNameCC">Name on card</label>
    <input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
</div>
<div>
    <label for="frmCCNum">Card Number</label>
    <input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
</div>
<div>
    <label for="frmCCCVC">CVC</label>
    <input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
</div>
<div>
    <label for="frmCCExp">Expiry</label>
    <input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
</div>

如果您现在在 chrome 浏览器中保存了信用卡，请尝试单击Run code snippet上面的按钮，您可以看到 chrome 自动填充正在运行。

来源：https ://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

于 2018-07-30T13:45:40.540 回答
1

Chrome 还通过占位符进行扫描。

示例：<input placeholder='dd-mm-yyyy'/>将触发它成为信用卡字段。

于 2018-08-23T08:22:24.227 回答