Chrome 如何检测信用卡字段？

Question

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

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

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

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

Answer 1

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

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

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

Here's a link to the official current WHATWG HTML Standard for enabling autocomplete.

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

如何在您的 HTML 表单上启用自动完成功能

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

• 为所有<input> 字段使用<label>
• 将autocomplete 属性添加到您的<input> 标记并使用此guide 填写。
• 为所有<input> 标签正确命名name 和autocomplete 属性

• 示例：

  <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> 标签

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

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

• 名字
  • 对 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（用于注册和密码更改表格）

资源

• Current WHATWG HTML Standard for autocomplete.
• "Create Amazing Forms" from Google。好像几乎天天更新。精彩的阅读。
• "Help Users Checkout Faster with Autofill" from Google 2015 年。

Answer 2

从这个答案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 属性。

我链接到的答案有几个链接以获取更多信息；此处不再赘述。

其他一些cmets：

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

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

Answer 3

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

要触发信用卡自动填充，

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

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

Answer 4

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

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

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

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

回到解决方案，要使自动填充正常工作，请在 autocomplete 属性中使用 cc-number 作为卡号，cc-name 用于持卡人姓名，cc-csc 用于 cvc，cc-exp 用于卡到期日期。 这是一个与 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

Answer 5

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

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