Question

我在自己维护的网站上有一张信用卡输入表。后端被编码为采用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中使用，但是在我们的网站上不起作用。但是，在带有台式机Chrome的网站上添加autocomplete =“ cc-exp”和maxlength =“ 5”可以在网站上使用，但似乎不能在Android上使用Chrome。我的Andrid手机上的Chrome仍会自动以MM / YYYY填充。

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

这个小提琴（https://jsfiddle.net/JonathanN/j054kbgx/）显示了我原始形式的所有派生形式以及我所看到的所有结果。如果有一种100％保证的方式告诉浏览器格式是MM / YY，那将是很好的。如果不这样做，了解有关这些表格如何为他人工作的更多信息也将有所帮助。

Answer 1

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

Answer 2

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

Chrome信用卡过期自动填充格式

2 个答案: