如何铬检测信用卡领域？(How does Chrome detect Credit Card fie

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

编辑：添加屏幕截图。 这是不一样的浏览器自动完成。 你不必进入之前以相同的形式价值。

我应该怎么写我的HTML表单，这样浏览器检测这些信用卡领域和触发这种行为？

有条纹状的工作是一个例子将是理想的。

Answer 1:

从这个答案https://stackoverflow.com/a/9795126/292060 ，它看起来像铬要么匹配的字段名称的正则表达式模式，或形式显式使用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，并获得电阻数量惊人的，当我举报）。 然而，也有发现它令人沮丧，当客户想要使用它的帖子，有镀铬设置与信用卡，网站阻止它。

Answer 2:

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

要触发信用卡自动填充，

1. SSL必须在表上启用
2. 如果启用了SSL的标准信用卡字段名称很多变体应该工作。

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

Answer 3:

这个问题是很老，但我对2017年更新的答案 ！

现在你可以告诉你的浏览器哪些字段是信用卡信息只是通过命名<input>正确。

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

下面是官方目前的WHATWG HTML标准的链接能够自动完成。

谷歌写了一个相当不错的指南 ，用于开发用于移动设备友好的Web应用程序。 他们对如何命名表单上输入方便地使用自动填充的部分。 尽管它已经针对移动写的，这适用于台式机和移动！

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

下面是关于如何启用自动完成一些关键点：

• 使用<label>您所有<input>字段
• a添加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="[e-mail]" required autocomplete="email"> <!-- note that "emailC" will not be autocompleted --> <label for="frmEmailC">Confirm Email</label> <input type="email" name="emailC" id="frmEmailC" placeholder="[e-mail]" required autocomplete="email"> <label for="frmPhoneNumA">Phone</label> <input type="tel" name="phone" id="frmPhoneNumA" placeholder="[phone]" 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 （用于注册和密码更改表单）

资源

• 当前WHATWG HTML标准自动完成。
• 从谷歌“创造了惊人的形式” 。 好像几乎每天都进行更新。 优异的读取。
• “帮助用户结帐与自动填充更快”从谷歌在2015年。

Answer 4:

铬是使用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

Answer 5:

Chrome浏览器还可以扫描直通占位符。

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

文章来源: How does Chrome detect Credit Card fields?