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

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

我想要的是？

>输入应格式化为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商店>点击帐户>付款方式>添加xyk或借记卡.此屏幕也可在此处找到：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;    }}

以上格式完美地标记了xyk号,但问题在我想要编辑时开始.

但是,由于光标只是跳到最后,因此上面不满足测试用例5.

我怎样才能实现这种行为.我知道谷歌已经做到了这一点.

(请不要使用PayPal答案)

编辑：请注意,我正在寻找本机JavaScript解决方案,但可以随意建议插件作为注释.例外是几乎没有依赖的库,所以可以只复制源代码.

我还在上面的代码中删除了jquery以鼓励本机Js解决方案.

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

          总结       
以上是内存溢出为你收集整理的javascript  – 自动格式化xyk号作为用户类型输入全部内容，希望文章能够帮你解决javascript  – 自动格式化xyk号作为用户类型输入所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1119150.html