所以 Safari 在 iOS8 上提供了 Scan Credit Card 功能以及一些信用卡表格。
我的问题是，Safari 如何确定何时提供此选项？
到目前为止，我发现这个选项在 Amazon 和 PayPal 上可用，但我的信用卡输入表单都无法重现这种行为。
【问题讨论】：
标签： ios safari ios8 credit-card
感谢@barbazoo，扫描信用卡选项将通过 https 提供，并带有有效（非自签名）证书。
【讨论】：
在对 iOS8 浏览器和 Chrome 仿真进行了一些研究后，我部分地想通了。我知道一些解决方案，但我不确定是否还有其他方法可以做到这一点。您必须感谢 Apple 惊人地缺乏这方面的文档。
目前 Netflix/Amazon 的信用卡扫描工作正常。因此，我在 Chrome 浏览器中模拟了一个 iOS8 用户代理，并检查了他们信用卡号字段的标记。这是 Netflix 的：
<input name="cardNumber" smopname="num" id="cardNumber-CC" class="cardNumber" type="text" value="************0891" pattern="[0-9]*">
这是亚马逊的：
<input name="addCreditCardNumber" size="20" maxlength="20">
那时我玩弄了一个通过 HTTPS 提供的表单，我可以控制它并开始设置属性以查看会发生什么。下面，“works”表示“成功触发卡片扫描”，“doesn't work”表示“没有触发卡片扫描”：
name="addCreditCardNumber" => 有效name="cardNumber" => 有效name="cardnumber" => 有效class="cardNumber" => 不起作用type="cardNumber" => 不起作用id="cardNumber", id="creditCardNumber", id="creditCardMonth", id="creditCardYear" => 有效由于name 属性驱动表单数据并可能影响服务器端表单处理的工作方式，我强烈建议您通过将输入id 设置为cardNumber 来触发信用卡扫描。
我会链接到相关文档...但是，嘿！ 没有（至少，我不知道）
【讨论】：
placeholder 也可以。占位符中某处的模式“卡号”似乎也触发了自动填充。
我发现这样的东西可以工作，但我认为这是一个非常丑陋的解决方案，因为它取决于label 标签之间的实际显示文本：
<html>
<head>
<title>AutoFill test</title>
</head>
<body>
<h1>AutoFill test</h1>
<h2>revision 4</h2>
<form action="#">
<input type="text" name="cardNumber" id="id1"> <label for="id1">Number</label><br>
<input type="text" name="cardName" id="id2"> <label for="id2">Name on card</label><br>
<label>Expiration date</label>
<input type="text" name="expirationMonth" id="id3" maxlength="2">
<input type="text" name="expirationYear" id="id4" maxlength="2"><br>
<input type="text" name="csc" id="5"> <label for="id5">CSC</label><br>
</form>
</body>
</html>
我不完全确定，但我认为name 参数并不重要。
【讨论】：
cardName 更改为yyy，并且成功了。 （没有试图操纵其他人。）
对于过期字段，根据 Arnaud 的回答，我发现过期字段可以从 id 属性中的 cardExpirationYear 和 cardExpirationMonth 中识别出来。
当年份和月份是具有适当 ID 的常规文本输入时，此方法有效。月份填充为 2 位数字，年份填充为 4 位数字。
在使用
<input type="text" id="cardNumber" placeholder="CC number">
<select id="cardExpirationMonth">
<option value="01">01</option>
<option value="02">02</option>
...
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="cardExpirationYear">
<option value="2014">2014</option>
<option value="2015">2015</option>
...
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
我不知道选项标签中还有哪些其他值。
【讨论】：
坚持与信用卡相关的类型，大多数现代浏览器都会自动为您识别这些字段，包括 Mobile Safari 和“扫描信用卡”功能。额外的好处是，您也总能在移动设备上获得正确的键盘。
示例（注意autocomplete、x-autocompletetype 和pattern 属性）：
<input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number" pattern="\d*">
<input type="text" id="cc-name" autocomplete="cc-name" x-autocompletetype="cc-full-name">
【讨论】：
今天早上升级到 iOS 8.1.3 后，这一切都被打破了。在 iOS 8.1.2 上，上述所有操作都很好 - 现在扫描信用卡的键盘选项根本不会出现。这是我的代码，昨天在 iOS 8.1.2 上确实有效，今天在 iOS 8.1.3 上无效：
<html>
<head>
<title>Scan credit card using iOS 8</title>
<style type="text/css">
input {height:1.5em;width:95%}
input[type="number"] {font-size: 2.5em}
body {background-color:lightgray;font-size: 3em;font-family: sans-serif;}
#purchase {font-size: 2em;font-weight: bold;height:1.2em}
</style>
</head>
<body>
<form action="https://yoursite.com/credit-card-purchase" method="POST">
Credit Card Number 1<br />
<input type="number" autocomplete="cc-number" name="cardNumber" id="cardNumber" value="" placeholder="*** **** *** ****" />
<br />
Expiry month <br />
<input type="number" name="expirationMonth" id="cardExpirationMonth" />
<br />
Expiry year <br />
<input type="number" name="expirationYear" id="cardExpirationYear" />
<br />
<br />
<input type="submit" value="Purchase" id="purchase">
</form>
</head>
</html>
【讨论】：
除了Arnaud Brousseau's answer，在 iOS 模拟器文件中搜索“卡号”会产生这个文件：
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/SafariShared.framework/SafariShared
快速运行strings 会发现这些字符串肯定用于匹配潜在字段：
card number
cardnumber
cardnum
ccnum
ccnumber
cc num
creditcardnumber
credit card number
newcreditcardnumber
new credit card
creditcardno
credit card no
card#
card #
cvc2
cvv2
ccv2
security code
card verification
name on credit card
name on card
nameoncard
cardholder
card holder
name des karteninhabers
card type
cardtype
cc type
cctype
payment type
expiration date
expirationdate
expdate
还有一点：
month
date m
date mo
year
date y
date yr
无法完全看到（使用这种幼稚的方法）对哪些属性（id、name、placeholder...）或其他元数据（可能是标签？）的任何引用实际上与此列表进行了比较。此外，除了“name des karteninhabers”之外，这确实是非常面向英语的，这对于 Apple 恕我直言来说是非常不寻常的。
【讨论】：
这不是关于何时，而是关于如何我们可以在 Safari 浏览器中启用此功能。
我们来说说提交表单时会发生什么：
一些浏览器使用name 属性存储所有input 值。当遇到相同的 named input 元素时，它会自动完成这些字段。
有些浏览器只扫描autocomplete 属性以提供自动完成功能，
其他一些人也会扫描label 或name 之类的属性以查找input 元素。
现在，autocomplete 属性可以具有更大的值集，包括 cc-name（卡名）、cc-number、cc-exp、cc-csc（安全号码 - CVV）等（完整列表 here )
例如，我们可以对浏览器说，这是卡号字段，它应该尽可能提供autocomplete，并且它应该启用扫描信用卡功能：
<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
这里有更多的东西在起作用。我强烈推荐我推荐的这个blog。
【讨论】：
即使在使用上述自动完成和 ID 方法之后，我的页面顶部仍有一个标签，其值为 Credit / Debit / Gift Card，它阻止了 iOS 提供 Scan CC 选项。我最终在我的抄送编号字段上方添加了这个标签，以欺骗 iOS 提供扫描抄送选项：
<label style="opacity:0.01;color:#FFF;font-size:2pt;">Card Number</label>
不透明度为 0 或字体大小为 1pt 会阻止 iOS 提供该选项。
【讨论】：