我如何设置一个网页表格以支持在移动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的移动网站上使用，但它不适用于更小的零售商。那些零售商需要做什么才能让它在他们的网站上运行？

- ryan

---

我遇到了同样的问题。我的网站已经上线，但无法扫描信用卡号码。 - Aaron Bratcher

Answer 1

您的问题在这里得到了解答：https://dev59.com/2l8e5IYBdhLWcg3w-OYn#25925195

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

   id="credit-card-number"

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

- Niko Ruotsalainen

Answer 2

当我们在HTML表单中设置字段 name、id、label 和 autocomplete 属性时，它将自动填充这些字段，不仅适用于扫描信用卡，而且适用于其他类型的表单（例如结账表单）。

在这种情况下：

1. 当用户提交表单时，一些浏览器会存储这些值和它们的输入名称，并在用户再次遇到具有相同名称的表单时提供自动填充这些字段的选项。 2. 一些其他浏览器会扫描自动填充字段的值。 3. 还有一些浏览器会扫描输入标签和输入名称。

当扫描信用卡时，浏览器只需知道正确放置这些值的位置即可。

现在看看 HTML5 中的自动填充：autocomplete。

早期的 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]">

ex:

<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没有相关文档。这里是我参考的博客。

- Asim K T