Safari自动填充信用卡信息

Question

我正在尝试使用以下代码来使用"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">

- Claytinho

---

面对相同的问题。看起来它在某种程度上取决于站点的SSL证书。 - alexey

你解决了这个问题吗？ - alexey

还没有。但我认为这是Safari中的一个错误。 - Claytinho

解决方案：https://dev59.com/2l8e5IYBdhLWcg3w-OYn#25925195 - Claytinho

Answer 1

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

• 使用以下任意名称之一：addCreditCardNumber、cardNumber、cardnumber - 或 - 以下任一ID之一：cardNumber、creditCardNumber、creditCardMonth、creditCardYear（可能还有更多有效的ID或名称）
• 使用文本类型输入框（而非数字类型）
• 最重要的是，它只能在https上工作

希望这可以帮到您！

- Alejandro Garcia del Rio

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

- Claytinho

---

请问您能解释一下为什么这个代码可以运行吗？或者提供使用id的文档链接吗？我想了解哪种方法最有可能在所有未来版本的浏览器中都能正常工作 :) - Jesper Rønn-Jensen

我没有找到解释如何使用SSL和这些ID的文档，但Safari和Chrome可以正常工作。只记得使用SSL浏览。 - Claytinho

浏览器使用不同的匹配算法来基于类型、ID和名称以及相邻字段检测这些字段。确切的算法未知，以下是一个相当好的写作，说明已知的内容：https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/ - psaniko

Answer 3

我遇到了同样的问题，在iPhone上使用Safari无法填充信用卡到期日字段。我尝试使用单个字段以及分别用于MM和YYYY输入的字段。

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

就我所知，自动完成值应提示浏览器在自动填充期间插入什么数据。

到目前为止，我也无法在Safari上使其正常工作...

- josef.van.niekerk

Answer 4

看起来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字段将不会被填充以保持另一层安全性。

- gklka

Answer 5

自动完成属性只能有开/关，您可以根据需要设置自己的值，而且您可能会遇到浏览器问题。我建议您再次查看您的表单，确保它是正确的..!!

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

- user5444025

---

如果不行的话，可能是Safari出了些问题..!! - user5444025