Question

我想使用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商店＆gt;点击帐户＆gt;付款方式＆gt;添加信用卡或借记卡。此屏幕也可在此处找到：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，而不是尝试自己解决这个逻辑，你可以考虑使用屏蔽输入插件。我之所以选择this one只是因为它首先出现在搜索中。有自定义选项，它似乎满足您的所有要求。

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

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

1 个答案: