何时在iOS8 Safari上提供扫描信用卡选项？

Question

所以Safari 在iOS8上提供扫描信用卡功能,并提供一些信用卡表格.

我的问题是,Safari如何确定何时提供此选项？

到目前为止,我发现此选项在亚马逊和PayPal上可用,但我的信用卡输入表单都没有能够重现此行为.

Answer 1

在对iOS8浏览器和Chrome仿真进行了一些研究后,我发现了部分内容.我知道一些解决方案,但我不确定是否有其他方法可以做到这一点.你将不得不感谢Apple在这方面缺乏文档.

目前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属性驱动形式的数据,并可能影响方式服务器端的表单处理的作品,我强烈建议你输入设定触发信用卡扫描id到cardNumber.

我会链接到相关文档...但是嘿!有没有(至少不是我所知道的)

Answer 2

我认为最好的办法是在输入中使用HTML5自动完成类型.

坚持信用卡相关类型,大多数现代浏览器将自动识别这些字段,包括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">

我还写了一篇关于这个主题的相关博客文章,并构建了一个HTML5 Autocomplete Cheatsheet.

Answer 3

除了Arnaud Brousseau的回答之外,在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恕我直言,这是非常不寻常的.

Answer 4

感谢@barbazoo,扫描信用卡选项将通过https提供,并带有有效(非自签名)证书.

Answer 5

对于到期领域的基础上,阿尔诺的答案,我发现过期领域将从识别cardExpirationYear并cardExpirationMonth在为id属性.

这在年和月是具有适当ID的常规文本输入时起作用.月份填充为2位数字,年份填充为4位数字.

在使用<select>标签的快速测试中,我发现它还填充了正确的月份和年份.

<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>

我不知道其他值在选项标签中会起作用.