如何在mobile safari中设置web表单以支持iOS 8信用卡扫描？

iOS 8的一个功能是能够使用手机的摄像头扫描信用卡，并将号码自动输入Safari的输入中。请看这里：

---

然而，尽管我已经证实它适用于亚马逊的移动网站，但它不适用于小型零售商。那些零售商需要做些什么才能让它在他们的网站上运行？

这里有你问题的答案

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

id=“信用卡号”

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

---

当我们在HTML表单中设置字段

name

、

id

、

label

和

autocomplete

属性时，它将自动完成这些字段，不仅用于扫描信用卡，也用于其他类型的表单。（比如结帐单）

在这种情况下：

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

其他一些浏览器将扫描自动完成字段值，然后

（3） 有些人扫描输入标签和输入名称

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

现在看看HTML5的

自动完成功能

早期的
autocomplete
只有
on
和
off
值。现在他们有了一吨，包括
cc name
（卡名），
cc number
，
cc exp
，
cc csc
（安全号码-CVV）等（完整列表）

我们如何应用这一点：

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

当我们像这样编写代码时，浏览器确切地知道应该在该字段中填充什么类型的值。但是像safari这样的浏览器需要将
name
或
id
或
label
值设置正确

迄今为止，支持用于自动完成值的
自动完成
、
id
和
名称
属性。
Safari没有这方面的文档。这是我的裁判。
我也有同样的问题。我有一个网站，无法扫描卡号。
<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]

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