如何在移动狩猎中设置支持iOS 8信用卡扫描的web表单？

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

这里有你问题的答案，https://stackoverflow.com/a/25925195/4079317

1. 输入字段必须使用正确的id。示例： Id=“信用卡号码”
2. 网站必须通过HTTPS访问，并且需要有有效的证书。

Answer 2

当我们在HTML表单中设置字段name、id、label和autocomplete属性时，它将自动完成这些字段，不仅可以扫描信用卡，还可以扫描其他类型的表单。(如结帐表格)。

在这种情况下：

1. 当表单提交时，，一些浏览器会用它们的输入名称来存储这些值，下次当用户遇到具有相同名称的表单时，它将提供自动完成这些字段。
2. 一些其他浏览器将扫描自动完成字段值，以及

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

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

现在看看autocomplete for HTML5。

早期的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没有这方面的文档。这是我推荐的博客。