Safari 自动填充信用卡答案

【问题标题】：Safari autofill Credit CardSafari 自动填充信用卡
【发布时间】：2014-03-20 01:46:49
【问题描述】：

我正在尝试使用下面的代码来使用信用卡的“Safari 的自动填充”。但它没有工作

<input type="text" autocomplete="cc-number">
<input type="text" autocomplete="cc-name">
<input type="text" autocomplete="cc-exp-month">
<input type="text" autocomplete="cc-exp-year">
<input type="text" autocomplete="cc-csc">

【问题讨论】：

面临同样的问题。它似乎在某种程度上取决于网站的 SSL 证书。
问题解决了吗？
还没有。但我认为这是 Safari 中的一个错误
解决方案：stackoverflow.com/a/25925195/2209659

标签： html autocomplete safari autofill

【解决方案1】：

要使其正常工作，您需要：

使用以下任何名称：addCreditCardNumber、cardNumber、cardnumber - 或 - 以下任何 ID：cardNumber、creditCardNumber、creditCardMonth、creditCardYear（可能有更多有效的 ID 或名称）
使用文本类型（不是数字类型）的输入
最重要的是它只能通过 https 工作

希望这会有所帮助！

【讨论】：

【解决方案2】：

我通过使用这个 id 解决了：

<input type="text" id="cardNumber">
<input type="text" id="cardHolder">
<input type="text" id="cardExpirationMonth">
<input type="text" id="cardExpirationYear">
<input type="text" id="cardCsc">

【讨论】：

您能解释一下为什么会这样吗？也许链接到使用 ID 的文档？我想了解哪种方法最有可能在所有未来浏览器的所有未来版本中工作:)
我没有找到解释但使用 SSL 和这些 ID 的文档，Safari 和 Chrome 可以正常工作。记住只使用 SSL 浏览
浏览器使用不同的匹配算法根据类型、id 和名称以及相邻字段来检测这些字段。确切的算法未知，这里有一篇关于已知内容的很好的文章：cloudfour.com/thinks/…

【解决方案3】：

我遇到了同样的问题，iPhone 上的 Safari 只是拒绝填写信用卡到期字段。我尝试使用单个字段，以及 MM 和 YYYY 输入的单独字段。

根据https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete，自动完成值取决于输入字段是佩戴expectation mantle还是anchor mantle。后者意味着该字段是隐藏的输入字段，在这种情况下 on 和 off 是不允许的，但输入应该来自自动填充字段名称列表，列出在WhatWG 页面。

据我所知，自动填充值应该向浏览器提示自动填充期间要插入哪些数据。

到目前为止，我也无法让它在 Safari 上运行...

【讨论】：

【解决方案4】：

自动完成属性只能有开/关，您可以根据需要拥有自己的值，并且您可能会遇到浏览器问题我建议您再次查看您的形式，应该是这样的……！！

<form action="demo_form.asp" method="get" autocomplete="on">

【讨论】：

如果不是..可能是一些机智的野生动物园..!!

【解决方案5】：

似乎 HTML 标准自动填充标记也可以工作（在 Safari 11.1 中测试）：

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

例如：

<input type="text" autocomplete="cc-name"> Name<br/>
<input type="text" autocomplete="cc-number"> Number<br/>
<input type="text" autocomplete="cc-exp-month" size="2">/<input type="text" autocomplete="cc-exp-year" size="4"> Exp<br/>
<input type="text" autocomplete="cc-csc"> CSC<br/>

我发现到期月份和年份应该彼此相邻，以便 Safari 找到它。不会填写 CSC 字段以维护另一层安全性。

【讨论】：