自动将输入的信用卡号格式化为用户类型

Question

我想使用 JavaScript 创建一个输入，该输入会自动将其格式化为正确的信用卡格式。

我想要什么？

输入

1. 应以 4 为一组格式化输入，例如，如果我输入1234567890123456，它应该将其格式化为1234 5678 9012 3456
2. 最大长度应为 16 位。因此，如果我输入1234567890123456789它应该将其格式化为"1234 5678 9012 3456">
3. 格式化应在您键入时进行。因此，如果我输入"123456"，它应该将其格式化为"1234 56">
4. 应忽略无效字符。因此，如果我输入564adsd299 474它应该将其格式化为"5642 9947 4">

输入还应尊重文本框的传统行为。(此处的|类似于光标，例如

如果我在输入时输入 8：

5. 1234 5|67它应该变成1234 58|67
6. 1234|，它应该转向1234 8
7. 1234| 567它应该转向1234 8567
8. 1234| 5679它应该转向1234 8567 9

如果我在输入时删除前一个字符：

9. 1234 5|67它应该变成1234 |67
10. 1234 |567它应该转向1234| 567
11. 1234| 567它应该转向123|5 67

更多的测试用例可能会随之而来。

例

基本上，它的行为应该与Google Play商店中使用的"输入卡详细信息"完全相同。要查找此页面，请执行以下操作： 在安卓设备上打开 Play 商店>点击帐号>付款方式>添加信用卡或借记卡。此屏幕也可以在这里找到：https://play.google.com/store/account

到目前为止，我有什么？

这是我到目前为止所拥有的：

var txtCardNumber = document.querySelector("#txtCardNumber");
txtCardNumber.addEventListener("input", onChangeTxtCardNumber);
function onChangeTxtCardNumber(e) {		
var cardNumber = txtCardNumber.value;

	  // Do not allow users to write invalid characters
var formattedCardNumber = cardNumber.replace(/[^d]/g, "");
formattedCardNumber = formattedCardNumber.substring(0, 16);

// Split the card number is groups of 4
var cardNumberSections = formattedCardNumber.match(/d{1,4}/g);
if (cardNumberSections !== null) {
formattedCardNumber = cardNumberSections.join(' ');	
}
	
console.log("'"+ cardNumber + "' to '" + formattedCardNumber + "'");

// If the formmattedCardNumber is different to what is shown, change the value
if (cardNumber !== formattedCardNumber) {
txtCardNumber.value = formattedCardNumber;
}
}

<input id="txtCardNumber"/>

以上完美地格式化了信用号，但是当我想编辑时，问题就开始了。

但是，上述内容不满足测试用例 5 以后的要求，因为光标只是跳到末尾。

我怎样才能实现这种行为。我知道这是可能的，因为谷歌已经做到了。

(请不要使用PayPal答案(

编辑：请注意，我正在寻找原生JavaScript解决方案，但是请随时建议插件作为评论。例外是几乎没有依赖项的库，因此可以只复制源代码。

我还删除了上述代码上的jQuery，以鼓励原生JS解决方案。

Answer 1

我看到你正在使用jQuery，而不是尝试自己解决这个逻辑，你可以考虑使用屏蔽的输入插件。我选择这个只是因为它在搜索中首先出现。有自定义选项，它似乎可以满足您的所有要求。

$('#txtCardNumber').mask("9999 9999 9999 9999");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<input id="txtCardNumber"/>

Answer 2

这应该有效：

var format = [9, 2, 3,5,5,5,5,5,5,5,4, 5, 5, 5, 54, 4, 4, 4, 4, 4, 4, 4, 
4, 4].map((data, index) => {
if ((index + 1) % 4 == 0) {
data = data + " "
}
return data
})
format= format.join("")
console.log("format", format)