所以Safari在iOS8上提供了一个名为扫描信用卡的功能，适用于某些信用卡表单。
我的问题是，Safari是如何确定何时提供此选项的？
到目前为止，我发现这个选项在亚马逊和贝宝上可用，但我的所有信用卡输入表单都无法重现此行为。
iOS8 Safari何时可用扫描信用卡选项？
56
- Dávid Kaszás
2
1你是否使用正确的、非自签名证书通过https提供了你的测试页面？这可能会有所帮助，请告诉我们。 - barbazoo
我尝试使用https，但是使用了自签名证书。如果我成功使用适当的证书测试它，我会通知你的。 - Dávid Kaszás
9个回答
98
通过在iOS8浏览器和Chrome仿真中进行一些研究，我部分地弄清楚了它。我知道一些解决方案，但我不确定是否有其他方法可以实现。你将不得不感谢苹果在这方面提供的惊人缺乏文档。
目前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提供的表单，并开始设置属性以查看会发生什么。以下，“有效”表示“成功触发了卡扫描”，而“无效”表示“未能触发卡扫描”：
- name="addCreditCardNumber" => 有效 - name="cardNumber" => 有效 - name="cardnumber" => 有效 - class="cardNumber" => 无效 - type="cardNumber" => 无效 - id="cardNumber"，id="creditCardNumber"，id="creditCardMonth"，id="creditCardYear" => 有效
由于name属性驱动表单数据并可能影响服务器端表单处理的方式，因此我强烈建议将输入的id设置为cardNumber来触发信用卡扫描。
我想链接相关文档...但是嘿！没有（至少我不知道有）。
- Arnaud Brousseau
16
2谢谢。我选择了id='cardNumber'，看起来很好用。我希望能在Safari开发者中心找到相关文档，但是我没有找到任何关于这个功能的提及。 - Simon_Weaver
1抱歉，我尝试了你的答案，但它不起作用。我已经建立了一个带有输入字段的表单，就像你在这里写的那样。我使用它在一个不是自签名的https页面中。但是扫描功能在我的iphone上没有出现...你能否多描述一下？ - Niels
@jb。你的测试页面在iOS 8.1.2上运行得很好，但似乎在iOS 8.2+上无法正常工作。有人知道如何使这段代码适用于更近期的iOS 8版本吗？ - Alexander
1刚刚做了一些尝试，似乎在Safari中，
placeholder也能起作用。在占位符中出现“卡号”这个模式似乎也会触发自动填充。 - metahamza这适用于UIWebView吗？ - Ahd Radwan
显示剩余11条评论
24
我认为最好的选择是在你的输入框中使用HTML5自动填充类型。
建议选择与信用卡相关的类型，大多数现代浏览器都会自动识别这些字段，包括移动版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自动完成速查表。
- Ryan McGeary
2
1嗨，Ryan，你知道信用卡自动填充是否可以在单个输入字段autocomplete="cc-exp"上工作吗？ - Mark Steggles
@MarkSteggles 我认为这取决于浏览器和/或第三方自动填充插件的能力。 - Ryan McGeary
18
除了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”之外，这确实非常偏向英语，我认为这在苹果公司相当不寻常。
- jcaron
11
感谢 @barbazoo ，扫描信用卡选项将通过有效（非自签名）证书在 https 上可用。
- Dávid Kaszás
1
我相信这一定会为人们节省一些麻烦 - 但是HTML中需要什么才能被检测为信用卡字段呢？我的信用卡字段没有被检测为信用卡字段。 - Simon_Weaver
7
针对过期字段，根据Arnaud的回答，我发现过期字段将从
我不知道在选项标签中还有哪些值可以使用。
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>
我不知道在选项标签中还有哪些值可以使用。
- Eric
1
这不是关于“何时”的问题，而是关于在Safari浏览器中如何启用此功能的问题。
让我们来谈谈表单提交时会发生什么：
1. 一些浏览器将所有带有“name”属性的“input”值存储起来。当它遇到相同“name”的“input”元素时，它将提供自动填充这些字段的选项。 2. 一些浏览器只扫描“autocomplete”属性以提供自动填充。 3. 还有一些浏览器也会扫描“label”或“name”等属性以查找“input”元素。
现在，“autocomplete”属性可以具有更大的值集，包括“cc-name”（卡名称）、“cc-number”、“cc-exp”、“cc-csc”（安全号码 - CVV）等（完整列表here）。
例如，我们可以告诉浏览器，这是卡号字段，应尽可能提供自动填充，并启用扫描信用卡功能，如下所示：
一般来说：
更详细的例子：
每个自动完成的值都是这样的：
当我们像这样编写代码时，浏览器会准确地知道应该在该字段中填充什么值。
但是像Safari这样的浏览器也需要正确设置
到目前为止，支持使用
让我们来谈谈表单提交时会发生什么：
1. 一些浏览器将所有带有“name”属性的“input”值存储起来。当它遇到相同“name”的“input”元素时，它将提供自动填充这些字段的选项。 2. 一些浏览器只扫描“autocomplete”属性以提供自动填充。 3. 还有一些浏览器也会扫描“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
这里涉及到更多的事情。我强烈推荐我提到的博客。
- Asim K T
0
我发现这样的方法可以工作，但我认为这是一个非常丑陋的解决方案，因为它依赖于在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参数并不重要。
- gklka
2
1是的，你走在正确的轨道上，但是名称参数是很重要的，虽然有更多正确的变化。我认为关键在于，必须使用有效的非自签名证书通过https访问该表单。 - Dávid Kaszás
HTTPS确实很重要。但是我尝试将
cardName更改为yyy，它起作用了。（没有尝试操作其他内容。） - gklka0
即使使用了上述自动完成和ID方法，我在页面顶部有一个带有值“信用卡/借记卡/礼品卡”的标签，这阻止了iOS提供扫描信用卡选项。最终，我在我的信用卡号字段上方添加了此标签，以欺骗iOS提供扫描信用卡选项：
<label style="opacity:0.01;color:#FFF;font-size:2pt;">Card Number</label>
不透明度为0或字体大小为1pt可以防止iOS提供该选项。- Chewmieser
0
今天早上升级到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>
- user2528675
2
有趣的是，值得注意的是我在我的域名上使用的SSL证书是128位的TLS 1.2，并且没有公开的审计记录。我想知道在iOS 8.1.2和iOS 8.1.3之间，苹果是否提高了SSL证书的加密阈值？比如增加到256位？ - user2528675
1问题已解决。看起来在iOS 8.1和8.1.3之间，表单字段的有效输入类型已从我之前设置的“number”更改为“tel”，现在我已将其更改为“tel”。将类型设置为“tel”后，扫描信用选项现在再次出现。当我将字段类型更改回数字时，扫描选项不会出现。 - user2528675
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接