如何设置网页表单以支持移动 Safari 中的 iOS 8 信用卡扫描？

Question

iOS 8 的一项功能是能够使用手机的摄像头扫描信用卡并将号码自动输入到 Safari 的输入中。看这里： http //www.cnet.com/how-to/scan-your-credit-card-instead-of-keying-in-number-for-purchases-in-ios-8/

然而，虽然我已经确认它适用于 amazon.com 的移动网站，但它不适用于较小的零售商。这些零售商需要做什么才能让它在他们的网站上运行？

Answer 1

您的问题在这里有答案/sf/answers/1814763681/

1. 您必须为输入字段使用正确的 id。例子：

   id="信用卡号"

2. 网站必须通过 HTTPS 访问，并且需要有有效的证书。

Answer 2

当我们设定的领域name，id，label并autocomplete在HTML表单属性，它会自动完成这些领域，不仅能扫描一张信用卡，但对其他类型的形式了。（如结帐表格）。

在这种情况下：

1. 提交表单时，某些浏览器会将这些值与其输入名称一起存储，下次用户遇到具有相同名称的表单时，它会自动完成这些字段。

2. 其他一些浏览器将扫描自动完成字段值，并且

(3) 其他一些扫描输入标签和输入名称。

当卡片被扫描时，浏览器只需要知道将这些值正确放在哪里。

现在看看autocompleteHTML5。

之前autocomplete只有on和off值才有。现在，他们有一吨，包括cc-name（卡名称）cc-number，cc-exp，cc-csc（安全号码- CVV）等等（完整列表在这里）

我们如何应用它：

<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

Safari 没有这方面的文档。这是我参考的博客。