何时在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服务的表单，我控制了它，并开始设置属性以查看会发生什么。 下面，“工作”表示“成功触发卡扫描”，“不工作”表示“ 未触发卡扫描”：

• name="addCreditCardNumber" =>有效
• name="cardNumber" =>有效
• name="cardnumber" =>有效
• class="cardNumber" =>不起作用
• type="cardNumber" =>不起作用
• id="cardNumber" ， id="creditCardNumber" ， id="creditCardMonth" ， id="creditCardYear" =>作品

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

我会链接到相关文档...但是嘿！ 没有 （至少，我不知道）

Answer 2

我认为最好的办法是在输入中使用HTML5自动完成类型 。

坚持信用卡相关类型，大多数现代浏览器将自动识别这些字段，包括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">

我还写了一篇关于这个主题的相关博客文章 ，并构建了一个HTML5 Autocomplete Cheatsheet 。

Answer 3

除了Arnaud Brousseau的回答之外 ，在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位数字。

在使用<select>标签的快速测试中，我发现它还填充了正确的月份和年份。

<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. 某些浏览器使用其name属性存储所有input值。 它会在遇到相同name d input元素时自动填充这些字段。

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

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

现在， autocomplete属性可以有更大的值集，包括cc-name （卡名称）， cc-number ， cc-exp ， cc-csc （安全号码-VCV）等。（完整列表在这里 ）

例如，我们可以向浏览器说，这是卡号字段，它应尽可能提供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完成值支持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

这里还有更多的事情要做。 我强烈推荐我提到的这个博客 。

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提供Scan CC选项。 我最终在CC号字段上方添加了这个标签，以诱骗iOS提供Scan CC选项：

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

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