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

Posted 2023-02-22

【中文标题】如何设置 Web 表单以支持移动 Safari 中的 iOS 8 信用卡扫描？

【英文标题】：How do I set up a web form to support iOS 8 credit card scanning in mobile safari?

【发布时间】：2014-11-14 17:03:32

【问题描述】：

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 的移动网站，但它不适用于小型零售商。这些零售商需要做什么才能让它在他们的网站上运行？

【问题讨论】：

我遇到了同样的问题。我有一个网站，但无法扫描卡号。

【参考方案1】：

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

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

id="信用卡号"

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

【参考方案2】：

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

在这种情况下：

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

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

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

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

现在查看 HTML5 的 autocomplete。

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

我们如何应用它：

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