Chrome如何检测信用卡字段？

时间：2013-03-01 22:58:19

标签： forms google-chrome stripe-payments

在某些形式中，Chrome自动填充会提示使用信用卡自动填充。

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

Screenshot

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

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

5 个答案:

答案 0 :(得分：13)

从这个答案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设置了信用卡，并且网站阻止了它。

答案 1 :(得分：10)

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

要触发信用卡自动填充，

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

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

答案 2 :(得分：9)

这个问题很老了，但我有一个 2017年更新答案！

您现在可以通过正确命名<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表单上启用自动完成功能

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

  • 对<label>个字段使用<input>
  • 在您的autocomplete代码中添加<input>属性，然后使用此guide填写。
  • 为所有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>！也可以找到此信息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（用于注册和密码更改表单）

资源

答案 3 :(得分：1)

Chrome在输入中使用autocomplete属性进行自动填充。如果将来尚未使用，将来可能会被其他浏览器使用。 autocomplete的实际用法是通过指定autocomplete="off"来说明是否启用了自动完成功能。但是chrome使用相同的自动填充功能。

自动填充和自动完成是不同的，所以请不要感到困惑。

自动填充是chrome用来根据chrome浏览器中自动填充设置中存储的内容填充表单的方法。

自动完成是所有浏览器用来记住您以前输入的内容（通过在输入时建议输入值）来记住的内容。因此，当您在输入上使用autocomplete="off"时，浏览器将停止建议这些值。

返回解决方案，要进行自动填充，请使用cc-number作为卡号，cc-name作为持卡人的姓名，cc-csc代表cvc，cc-exp代表卡的到期日期在您的autocomplete属性中。 这是与chrome自动填充兼容的示例：

<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">

<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">

<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">

<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">

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

答案 4 :(得分：0)

Chrome浏览器还会扫描占位符。

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

相关问题
最新问题