自动格式的信用卡号码输入作为用户类型

Question

我想创建一个使用JavaScript的输入，以正确的信用卡格式自动格式化它。

我想要什么？

1. 该输入应格式化输入，例如4组。如果输入123456789，则应格式化为1234 5678 9012 3456
2. 最大长度应为16位。所以，如果我输入123456789它应该格式化为“1234 5678 9012 3456”
3. 格式应发生在键入时。所以如果我输入“123456”，它应该格式化为“1234 56”
4. 无效的字符应该被忽略。所以，如果我在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

更多的测试用例可能会出现。

例

基本上它应该表现得完全像在谷歌采用的是“输入信用卡的详细信息” Play商店。要查找此页面：在Android设备上打开Play商店>点击账户>支付方式>添加信用卡或借记卡。这个屏幕也可以在这里找到：https://play.google.com/store/account

我到目前为止？

这是我到目前为止有：

var txtCardNumber = document.querySelector("#txtCardNumber"); 
 
txtCardNumber.addEventListener("input", onChangeTxtCardNumber); 
 

 
function onChangeTxtCardNumber(e) { \t \t 
 
    var cardNumber = txtCardNumber.value; 
 
    
 
\t // 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(' '); \t 
 
    } 
 
\t 
 
    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之前，因为光标只是跳转到最后。

我该如何实现这种行为。我知道这是可能的，因为谷歌已经做到了。

（请不使用支付宝的答案）

编辑：请注意，我在寻找本地JavaScript的解决方案，但是随时提出的插件为注释。例外情况是库很少或没有依赖关系，因此可以复制源代码。

我也在上面的代码中删除了jQuery来鼓励本机JS解决方案。

Answer 1

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

$('#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"/>