Chrome信用卡到期日自动填充格式

Question

我在一个网站上帮忙维护一个信用卡输入表单。后端编码支持以MM/YY的格式获取2位数字的到期月份和2位数字的年份。Chrome似乎要求按照MM/YYYY的格式提供信用卡信息，因此如果用户保存的信用卡到期时间是05/2023，Chrome会自动填充成05/20。由于jquery输入掩码的原因，它将截断23部分。这导致了支付被拒绝，没有人想要这种结果。

以下是该表单的基本示例：

<form action="/">
  <h3>Label</h3>
  <div>
    <input name="CardHolderName" placeholder="Cardholder Name" type="text">
  </div>
  <div>
    <input name="CreditCardNumber" placeholder="Credit Card Number" type="tel">
  </div>
  <div>
    <label for="ExpirationDate">Expirion Date</label>
    <input id="ExpirationDate" name="ExpirationDate" placeholder="MM/YY" type="tel">
  </div>
  <div>
    <input name="Cvv2" placeholder="CVC" type="tel">
  </div>
</form>

我浏览了 https://wiki.whatwg.org/wiki/Autocomplete_Types 和 https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill，找到了autocomplete="cc-exp"和一些关于格式的指导。

在旧规范中（已弃用），格式与Chrome的匹配相当，当maxlength="7"时，提到了MM/YYYY格式。在这种情况下，maxlength="5"应该可以得到我想要的结果，但不是始终如一的。例如，在我的jsfiddle中添加maxlength="5"有效，但在我们的网站上无效。然而，在桌面版Chrome上添加autocomplete="cc-exp"和maxlength="5"可以在网站上工作，但在Android上的Chrome似乎不行。我的安卓手机上的Chrome仍然会自动填充MM/YYYY。

新规范说明格式为YYYY-MM，与Chrome所做的不符，因此没有帮助。没有提到任何其他被接受的格式。

这个jsfiddle (https://jsfiddle.net/JonathanN/j054kbgx/) 展示了所有我的原始表单的派生形式，以及我看到的所有结果。如果有一种100%保证的方法告诉浏览器格式为MM/YY那将是很好的。如果不行，了解其他人如何使用这些表单也会很有帮助。

- JonathanN

---

原来在Android上使用Chrome的问题是我正在使用的一个jquery库，jquery InputMask。对该产品没有任何负面评价，但由于Chrome的晦涩CC启发式算法和InputMask的工作方式，它导致Chrome认为该字段应该是MM/YYYY格式而不是MM/YY格式。我猜测InputMask正在改变/取消maxlength，这就是问题所在。最终，一个可以设置自动填充格式的规范会很好，但似乎有太多需要支持的CC输入表单实现，而Chrome正在倾向于一种启发式方法。 - JonathanN

Answer 1

我也遇到了这个问题 - 查看了Chrome的自动填充规范，将autocomplete="cc-exp-year"添加到表单字段中解决了它。

- ok_anthony

---

我有一个字段包含了月份和年份结合在一起，所以情况似乎不同。不过很高兴你已经找到解决方法了。 - JonathanN

Answer 2

你需要在你的过期日期输入框中设置'autocomplete' => 'off'，然后创建两个输入框cc-exp-month/cc-exp-year，像这样：

<input id="cardform-exp" autocomplete="off" placeholder="MM / YY">
<div style="opacity: 0;line-height: 1px;position:relative;">
   <input id="cardform-exp-month" autocomplete="cc-exp-month" style="height:34px;width: 20px;position: absolute;top: 100px;left: 30px;z-index: -100;">
   <input id="cardform-exp-year" autocomplete="cc-exp-year" style="height:34px;width: 20px;position: absolute;top: 100px;left: 80px;z-index: -100;">
</div>

使用 JavaScript 截取月份/年份并将其替换为到期日期输入框中：

$("#cardform-exp").val($("#cardform-exp-month").val() + ' / ' + $("#cardform-exp-year").val().substr(2, 2) );

- labunskyi