javascript – 自动格式化信用卡号作为用户类型输入

我想使用JavaScript创建一个输入,自动使用正确的信用卡格式对其进行格式化.

我想要的是？

>输入应格式化为4的组输入.如果我输入1234567890123456,则应将其格式化为1234 5678 9012 3456
>最大长度应为16位.因此,如果我输入1234567890123456789,则应将其格式化为“1234 5678 9012 3456”
>键入时应格式化.因此,如果我键入“123456”,则应将其格式化为“1234 56”
>应忽略无效字符.所以,如果我输入564adsd299 474,它应格式化为“5642 9947 4”

输入还应该尊重文本框的传统行为. (|这里类似于光标,例如

如果我在输入时输入8：

> 1234 5 | 67它应该转到1234 58 | 67
> 1234 |,应该转到1234 8
> 1234 | 567它应该转到1234 8567
> 1234 | 5679它应该转到1234 8567 9

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

> 1234 5 | 67它应该转向1234 | 67
> 1234 | 567它应该转向1234 | 567
> 1234 | 567应该转向123 | 5 67

可能会有更多的测试用例.

例

基本上它应该与Google Play商店中使用的“输入卡片详细信息”完全相同.要查找此页面：在Android设备上打开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;
    }
}