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

【问题标题】：Chrome Credit Card Expiration Autofill FormatChrome 信用卡到期自动填充格式
【发布时间】：2019-02-05 09:12:00
【问题描述】：

我在帮助维护的网站上有一张信用卡输入表。后端被编码为采用 MM/YY 格式的 2 位到期月份和 2 位年份。 Chrome 似乎设置为以 MM/YYYY 格式应用信用卡信息，因此如果用户存储的 CC 到期时间为 05/2023，它将自动填充 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" 应该给我我想要的，但它并不一致。例如，添加 maxlength="5" 在我的 jsfiddle 中有效，但在我们的网站上无效。但是，添加 autocomplete="cc-exp" 和 maxlength="5" 可以在带有桌面 Chrome 的网站上使用，但似乎不适用于 Android 上的 Chrome。我的 Andrid 手机上的 Chrome 仍会自动填充 MM/YYYY。

较新的规范说格式是 YYYY-MM，这与 Chrome 所做的不匹配，因此没有帮助。没有提及任何其他可接受的格式。

这个小提琴 (https://jsfiddle.net/JonathanN/j054kbgx/) 显示了我原始形式的所有推导，以及我看到的所有结果。如果有 100% 保证的方式告诉浏览器格式是 MM/YY，那就太好了。如果做不到这一点，了解有关这些表格如何为其他人工作的更多信息也会有所帮助。

【问题讨论】：

原来Android上Chrome的问题是我使用的一个jquery库，jquery InputMask。该产品没有阴影，但在 Chrome 之间钝化 CC 启发式算法和 InputMask 之间的工作时，它导致 Chrome 认为该字段应该是 MM/YYYY 格式而不是 MM/YY。我猜 InputMask 正在更改/取消设置 maxlength，这就是问题所在。最终，可以设置自动填充格式的规范会很好，但似乎需要支持的 CC 输入表单实现太多了，Chrome 倾向于采用启发式方法。

标签： html forms google-chrome credit-card

【解决方案1】：

您需要对到期输入执行“自动完成”=>“关闭”，然后使用 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>

在使用 js 之后，您将月/年删减并替换为到期输入：

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

【讨论】：

【解决方案2】：

我遇到了同样的问题 - 检查了自动填充的 Chrome 规范并将 autocomplete="cc-exp-year" 添加到表单字段中修复了它。

【讨论】：

我有一个字段结合了月份和年份，所以情况似乎不同。很高兴你找到了解决方法。