扫描信用卡选项在iOS8 Safari上何时可用？
所以Safari提供一些信用卡forms的iOS8上的扫描信用卡function。
我的问题是，Safari如何确定何时提供此选项？
到目前为止，我发现这个选项在Amazon和PayPal上是可用的，但是我的信用卡input表单都没有能够重现这种行为。
经过对iOS8浏览器和Chrome模拟器的一些研究之后，我想到了一部分。 我知道一些解决scheme，但我不确定是否还有其他方法可以做到这一点。 你将不得不感谢苹果周围的文档惊人的缺乏。
目前Netflix /亚马逊的信用卡扫描工作正常。 所以我在我的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服务的表单，我可以控制它，并开始设置属性，看看会发生什么。 下面，“作品”是指“成功触发卡扫描”，“不工作”是指“没有触发卡扫描”：
-
name="addCreditCardNumber"=>有效 -
name="cardNumber"=>有效 -
name="cardnumber"=>有效 -
class="cardNumber"=>不起作用 -
type="cardNumber"=>不起作用 -
id="cardNumber"，id="creditCardNumber"，id="creditCardMonth"，id="creditCardYear"=>作品
由于name属性驱动表单数据，并可能影响服务器端表单处理的工作方式，所以强烈build议通过将inputid设置为cardNumber来触发信用卡扫描。
我会链接到相关的文件…但嘿！ 没有 （至less，我不知道）
我认为你最好的select是在你的input上使用HTML5自动完成types 。
坚持信用卡相关的types，大多数现代浏览器会自动识别这些领域，包括移动Safari和“扫描信用卡”function。 奖金是，你将永远得到移动设备上正确的键盘。
示例（注释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">
我也在这个主题上写了一篇相关的博客文章 ，并构build了一个HTML5 Autocomplete Cheatsheet 。
通过@barbazoo，扫描信用卡选项将可通过https使用有效的（非自签名）证书。
除了Arnaud Brousseau的回答之外 ，在iOS模拟器文件中search“卡号”会生成以下文件：
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/SafariShared.framework/SafariShared
一个strings的快速运行揭示了这些string当然用于匹配潜在的领域：
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 …）或其他元数据（标签也许？）的任何引用实际上与这个列表进行比较。 另外，除了“名称卡丁车”之外，这真的是非常英文的，对于苹果恕我直言，这是非常不寻常的。
对于到期字段，基于阿诺的回答，我发现到期字段将从cardExpirationYear和cardExpirationMonth被识别在id属性中。
当年份和月份是正确的文本input和适当的ID时，这是有效的。 该月份填充为2位数字，年份填充为4位数字。
在使用<select>标签的快速testing中，我发现它也填充了正确的月份和年份。
<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>
我不知道什么其他值将在选项标签中工作。
这不是关于什么时候 ，而是关于如何在Safari浏览器中启用此function。
让我们来谈谈表单提交时会发生什么：
-
一些浏览器使用它的
name属性来存储所有的input值。 它会提供自动完成这些领域，当遇到相同的namedinput元素。 -
一些浏览器扫描只提供自动完成的
autocomplete属性， -
一些其他人也扫描
input元素的label或name的属性。
现在， autocomplete属性可以有更大的值集合，包括cc-name （卡片名称）， cc-number ， cc-exp ， cc-csc （安全号码 – CVV）等等。
例如，我们可以对浏览器说，这是卡号字段，它应该尽可能提供autocomplete ，它应该启用扫描信用卡function：
<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]
当我们像这个浏览器那样编写代码时，我们知道该字段应该填充什么types的值。
但浏览器像Safari浏览器需要name或id或label值也应设置正确的。
支持到目前为止autocomplete完成值， 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
这里有更多的东西在玩。 我强烈推荐这个博客我提到。
我发现这样的工作，但我认为这是一个非常丑陋的解决scheme，因为它取决于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参数并不重要。
今天早上升级到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>
即使在使用上述自动填充和ID方法之后，我的页面顶部也有一个标签，其中值为Credit / Debit / Gift Card ，阻止iOS提供Scan CC选项。 我最终在CC号码字段上面添加了这个标签来诱骗iOS提供扫描CC选项：
<label style="opacity:0.01;color:#FFF;font-size:2pt;">Card Number</label>
不透明度为0，或字体大小为1pt，防止iOS提供选项。
