ios 什么时候可以在 iOS8 Safari 上使用扫描信用卡选项？

When is the Scan Credit Card option available on iOS8 Safari?

提问by Dávid Kaszás

So Safari offers Scan Credit Cardfeature on iOS8 with some credit card forms.

因此，Safari在 iOS8 上通过一些信用卡表格提供了扫描信用卡功能。

My question is, how does Safari determine when to offer this option?

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

So far I found that this option is available on Amazon and PayPal, but none of my credit card input forms were able to reproduce this behaviour.

到目前为止，我发现 Amazon 和 PayPal 上提供了此选项，但我的信用卡输入表单都无法重现此行为。

回答by Arnaud Brousseau

After a bit of research with an iOS8 browser and Chrome emulation I figured it out partially. I know of some solutions, but I don't know for sure if there are other ways to do it. You'll have to thank Apple for the amazing lack of documentation around this.

在对 iOS8 浏览器和 Chrome 仿真进行了一些研究后，我部分了解了它。我知道一些解决方案，但我不确定是否有其他方法可以做到。您将不得不感谢 Apple 令人惊讶地缺乏这方面的文档。

Currently Netflix/Amazon have credit card scanning working properly. So I emulated an iOS8 user agent in my Chrome browser and inspected the markup of their credit card number field. Here's Netflix's:

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

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

And here's Amazon's:

这是亚马逊的：

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

At that point I played around with a form served over HTTPS that I had control over and started setting attributes to see what would happen. Below, "works" means "successfully triggered card scan" and "doesn't work" means "did nottrigger card scan":

那时，我使用了一个通过 HTTPS 提供服务的表单，我可以控制它并开始设置属性以查看会发生什么。下面，“作品”是指“成功触发卡扫描”和“不工作”的意思是“做不触发卡扫描”：

• name="addCreditCardNumber"=> works
• name="cardNumber"=> works
• name="cardnumber"=> works
• class="cardNumber"=> does not work
• type="cardNumber"=> does not work
• id="cardNumber", id="creditCardNumber", id="creditCardMonth", id="creditCardYear"=> works

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

Since the nameattribute drives form data and might impact the way server-side form processing works I highly recommend triggering credit card scan by setting your input idto cardNumber.

由于name属性驱动表单数据并可能影响服务器端表单处理的工作方式，我强烈建议您将输入设置id为cardNumber.

I would link to the relevant documentation...but hey! There's none(at least, not that I know of)

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

回答by Ryan McGeary

I think your better bet is to use HTML5 Autocomplete Typeson your inputs.

我认为您更好的选择是在您的输入中使用HTML5 自动完成类型。

Stick to the credit card related types, and most modern browsers will auto recognize these fields for you, including Mobile Safari and the "Scan Credit Card" feature. Bonus is that you'll always get the correct keyboard on mobile devices too.

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

Example (note autocomplete, x-autocompletetype, and patternattributes):

示例（注意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">

I also wrote a related blog poston this topic and built an HTML5 Autocomplete Cheatsheet.

我还写了一篇关于这个主题的相关博客文章，并构建了一个HTML5 自动完成备忘单。

回答by jcaron

In addition to Arnaud Brousseau's answer, a search for "card number" in the iOS simulator files yields this file:

除了Arnaud Brousseau 的回答之外，在 iOS 模拟器文件中搜索“卡号”会生成以下文件：

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

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

A quick run of stringson it reveals these strings which are certainly used for matching potential fields:

快速浏览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

and a bit further:

再进一步：

month
date m
date mo
year
date y
date yr

Can't quite see (with this na?ve approach) any references to which attributes (id, name, placeholder...) or other metadata (label maybe?) are actually compared against this list. Also, with the exception of "name des karteninhabers", this is really very english-oriented, that's quite unusual for Apple IMHO.

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

回答by Dávid Kaszás

Thanks to @barbazoo, the Scan Credit Card option will be available over https with a valid (not self signed) certificate.

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

回答by Eric

For the expiration fields, based on Arnaud's answer, I found that the expiration fields would be recognized from cardExpirationYearand cardExpirationMonthbeing in the idattribute.

对于到期领域的基础上，阿尔诺的答案，我发现过期领域将从识别cardExpirationYear并cardExpirationMonth在为id属性。

This worked when the year and month are regular text inputs with the appropriate IDs. The month is populated as a 2-digit number and the year as a 4-digit number.

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

In a quick test using <select> tags, I found that it also populated the correct month and year.

在使用 <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>

I don't know what other values will work in the option tags.

我不知道选项标签中还有哪些其他值会起作用。

回答by Asim K T

It's not about when, it's about howwe can enable this feature in Safari browser.

这不是关于何时，而是关于我们如何在 Safari 浏览器中启用此功能。

Let's just talk about what happens when a form is submitted:

我们只说提交表单时会发生什么：

1. Some browsers stores all inputvalues with it's nameattribute. And it will offer to autocomplete those fields when it encounters same named inputelements.

2. Some browsers scan for just autocompleteattribute for offering auto-completion and,

3. Some others scan for an attribute like labelor namefor inputelements too.

1. 一些浏览器input使用它的name属性存储所有值。它会在遇到相同的named input元素时自动完成这些字段。

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

3. 有些人扫描就像一个属性label或name为input元素了。

Now, autocompleteattribute can have a larger set of values including cc-name(Card name), cc-number, cc-exp, cc-csc(Security number - CVV) etc. (full list here)

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

For example, we could say to a browser that, this is card number field and it should offer autocompletewhen possible and it should enable scan credit card feature as:

例如，我们可以对浏览器说，这是卡号字段，它应该autocomplete在可能的情况下提供，并且应该启用扫描信用卡功能：

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

In general:

一般来说：

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

more detailed ex:

更详细的例子：

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

And each autocomplete values goes like this:

每个自动完成值都是这样的：

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

When we code it like this browser know exactly what kind of value should be populated in that field.

当我们像这个浏览器一样编写代码时，它确切地知道应该在该字段中填充什么样的值。

But browser like safari need nameor idor labelvalues should also be set right.

但是像 safari 这样的浏览器需要name或id或label值也应该设置正确。

Support so far for autocomplete, idand nameattributes for auto-completing values.

到目前为止支持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

There are more things at play here. I strongly recommend this blogI referred.

这里有更多的东西在起作用。我强烈推荐我提到的这个博客。

回答by Chewmieser

Even after using the autocomplete and ID methods described above, I had a label at the top of my page with the value Credit / Debit / Gift Cardthat prevented iOS from offering the Scan CC option. I ended up adding this label above my CC number field to trick iOS into offering the Scan CC option:

即使在使用上述自动完成和 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>

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

Opacity of 0, or a font-size of 1pt prevents iOS from offering the option.

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

回答by user2528675

This is now all broken after upgrading to iOS 8.1.3 this morning. When on iOS 8.1.2 all of the above worked just fine - now the keyboard option to scan credit card simply does not appear. Here's my code, which did work yesterday on iOS 8.1.2 and does not work today on iOS 8.1.3:

今天早上升级到 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>

回答by gklka

I've found that something like this works, but I consider this a very ugly solution, since it depends on the actual displayed text between the labeltags:

我发现这样的事情有效，但我认为这是一个非常丑陋的解决方案，因为它取决于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>

I am not entirely sure, but I think, that nameparameters are not important.

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