何时在iOS8 Safari上提供扫描信用卡选项？

Question

所以Safari在iOS8上提供了一些信用卡表格的扫描信用卡功能。

我的问题是，Safari如何确定何时提供此选项？

到目前为止，我发现此选项在亚马逊和PayPal上可用，但我的信用卡输入表单都没有能够重现此行为。

Answer 1

经过对iOS8浏览器和Chrome仿真的一些研究后，我发现了部分内容。我知道一些解决方案，但我不确定是否有其他方法可以做到这一点。你必须要感谢Apple在这方面缺乏文档。

目前Netflix /亚马逊的信用卡扫描工作正常。所以我在Chrome浏览器中模拟了一个iOS8用户代理，并检查了他们的信用卡号码字段的标记。这是Netflix的：

<input name="cardNumber" smopname="num" id="cardNumber-CC" class="cardNumber" type="text" value="************0891" pattern="[0-9]*">

这是亚马逊的：

<input name="addCreditCardNumber" size="20" maxlength="20">

那时我玩了一个通过HTTPS服务的表单，我控制了它并开始设置属性以查看会发生什么。下面，＆＃34;工作＆＃34;意味着＆＃34;成功触发了卡片扫描＆＃34;和＆＃34;不工作＆＃34;意味着＆＃34; 不触发卡片扫描＆＃34;：

• name="addCreditCardNumber" =＆gt;原理
• name="cardNumber" =＆gt;原理
• name="cardnumber" =＆gt;原理
• class="cardNumber" =＆gt;不起作用
• type="cardNumber" =＆gt;不起作用
• id="cardNumber"，id="creditCardNumber"，id="creditCardMonth"，id="creditCardYear" =＆gt;原理

由于name属性驱动表单数据并可能影响服务器端表单处理的工作方式，因此强烈建议您将输入id设置为cardNumber来触发信用卡扫描。

我会链接到相关文档......但是嘿！那里的 none （至少，我不知道）

Answer 2

我认为最好的选择是在输入上使用HTML5 Autocomplete Types。

坚持信用卡相关类型，大多数现代浏览器都会自动识别这些字段，包括Mobile Safari和“扫描信用卡”功能。好处是你也可以在移动设备上获得正确的键盘。

示例（注意autocomplete，x-autocompletetype和pattern属性）：

<input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number" pattern="\d*">

<input type="text" id="cc-name" autocomplete="cc-name" x-autocompletetype="cc-full-name">

我还在这个主题上写了related blog post并构建了一个HTML5 Autocomplete Cheatsheet。

Answer 3

除了Arnaud Brousseau's answer之外，在iOS模拟器文件中搜索“卡号”会产生以下文件：

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/SafariShared.framework/SafariShared

快速运行strings会显示这些字符串，这些字符串肯定用于匹配潜在字段：

card number
cardnumber
cardnum
ccnum
ccnumber
cc num
creditcardnumber
credit card number
newcreditcardnumber
new credit card
creditcardno
credit card no
card#
card #
cvc2
cvv2
ccv2
security code
card verification
name on credit card
name on card
nameoncard
cardholder
card holder
name des karteninhabers
card type
cardtype
cc type
cctype
payment type
expiration date
expirationdate
expdate

再远一点：

month
date m
date mo
year
date y
date yr

无法完全看到（使用这种天真的方法）对哪些属性（id，name，placeholder ...）或其他元数据（标签可能？）的任何引用都是实际上与此列表进行了比较此外，除了“name des karteninhabers”之外，这真的非常注重英语，对于Apple恕我直言，这是非常不寻常的。

Answer 4

感谢@barbazoo，扫描信用卡选项将通过https提供，并带有有效（非自签名）证书。

Answer 5

对于到期字段，根据Arnaud的回答，我发现可以从cardExpirationYear和cardExpirationMonth id属性中识别到期字段。

当年份和月份是具有适当ID的常规文本输入时，这是有效的。月份填充为2位数字，年份填充为4位数字。

使用＆lt; select＆gt;进行快速测试标签，我发现它也填充了正确的月份和年份。

<input type="text" id="cardNumber" placeholder="CC number">

<select id="cardExpirationMonth">
  <option value="01">01</option>
  <option value="02">02</option>
  ...
  <option value="11">11</option>
  <option value="12">12</option>
</select>

<select id="cardExpirationYear">
  <option value="2014">2014</option>
  <option value="2015">2015</option>
  ...
  <option value="2024">2024</option>
  <option value="2025">2025</option>
</select>

我不知道其他值会在选项标签中起作用。

Answer 6

时，我们可以在Safari浏览器中启用此功能 。

我们来谈谈提交表单时会发生什么：

1. 某些浏览器会将所有input值存储为name属性。当它遇到相同的name d input元素时，它会自动填充这些字段。

2. 有些浏览器仅扫描autocomplete属性以提供自动完成功能，

3. 其他一些人也会为label元素扫描name或input等属性。

现在，autocomplete属性可以包含更多的值，包括cc-name（卡片名称），cc-number，cc-exp，cc-csc（安全号码 - CVV）等（完整列表here）

例如，我们可以向浏览器说这是卡号字段，如果可能，它应该提供autocomplete，它应该启用扫描信用卡功能：

<label>Credit card number: 
  <input type=text autocomplete="cc-number">
</label>

一般来说：

<input type="text" autocomplete="[section-](optional) [shipping|billing](optional) 
[home|work|mobile|fax|pager](optional) [autofill field name]">

更详细的例子：

<input type="text" name="foo" id="foo" autocomplete="section-red shipping mobile tel">

每个自动填充值都是这样的：

section-red : wrapping as a section. (named red)
shipping : shopping/billing
mobile   : home|work|mobile|fax|pager (For telephone)
tel      : [Tokens][2]

当我们对此浏览器进行编码时，确切地知道应该在该字段中填充哪种值。

但是，类似Safari的浏览器需要name或id或label值也应设置正确。

目前为autocomplete，id和name属性支持自动填写值。

Browse  Ver OS              ID      Name    Autocomplete
Chrome  50  OS X 10.11.4    No      Yes     Yes
Opera   35  OS X 10.11.4    No      Yes     Yes
Firefox 46  OS X 10.11.4    Yes     Yes     No
Edge    25  Windows 10      No      Yes     No
Safari  9.1 OS X 10.11.4    Partial Partial Partial
Safari  9   iOS  9.3.1      Partial Partial Partial

这里还有更多的事情要发挥作用。我强烈建议我提到这个blog。

Answer 7

我发现这样的东西有效，但我认为这是一个非常难看的解决方案，因为它取决于label标签之间的实际显示文字：

<html>
  <head>
    <title>AutoFill test</title>
  </head>
  <body>
    <h1>AutoFill test</h1>
    <h2>revision 4</h2>

    <form action="#">
      <input type="text" name="cardNumber" id="id1"> <label for="id1">Number</label><br>
      <input type="text" name="cardName" id="id2"> <label for="id2">Name on card</label><br>
      <label>Expiration date</label>
      <input type="text" name="expirationMonth" id="id3" maxlength="2">
      <input type="text" name="expirationYear" id="id4" maxlength="2"><br>
      <input type="text" name="csc" id="5"> <label for="id5">CSC</label><br>
    </form>
  </body>
</html>

我不完全确定，但我认为，name参数并不重要。

Answer 8

今天早上升级到iOS 8.1.3后，现在全部破了。在iOS 8.1.2上，以上所有工作都很好 - 现在只显示扫描信用卡的键盘选项。这是我的代码，昨天在iOS 8.1.2上运行，今天在iOS 8.1.3上无效：

<html>
<head>
<title>Scan credit card using iOS 8</title>
<style type="text/css">
  input {height:1.5em;width:95%}
  input[type="number"] {font-size: 2.5em}
  body {background-color:lightgray;font-size: 3em;font-family: sans-serif;}
  #purchase {font-size: 2em;font-weight: bold;height:1.2em}
</style>
</head>
<body>
<form action="https://yoursite.com/credit-card-purchase" method="POST">
Credit Card Number 1<br />
<input  type="number" autocomplete="cc-number" name="cardNumber" id="cardNumber" value="" placeholder="*** **** *** ****" />
<br />
Expiry month <br /> 
<input type="number"  name="expirationMonth" id="cardExpirationMonth" />
<br />
Expiry year <br />
<input type="number" name="expirationYear" id="cardExpirationYear" />
<br />
<br />
<input type="submit" value="Purchase" id="purchase">
</form>
</head>
</html>

Answer 9

即使在使用上述自动完成和ID方法后​​，我的页面顶部还有一个标签，其值为Credit / Debit / Gift Card，阻止iOS提供“扫描CC”选项。我最终在CC号字段上方添加了这个标签，以诱骗iOS提供Scan CC选项：

<label style="opacity:0.01;color:#FFF;font-size:2pt;">Card Number</label>

不透明度为0或字体大小为1pt会阻止iOS提供该选项。