创建信用卡输入。为什么表格不能为4位数的信用卡添加破折号？

Question

我正在尝试创建一个信用验证表单。输入字段无论应始终最多为19位数字，并且有4位数字由短划分隔开。到目前为止，我可以在打字时做到这一点，但粘贴不起作用，编辑几个数字也不行，表单不会更新。

我不想使用任何插件，我的客户端只使用万事达卡和维萨卡，这就是为什么他们要求19位数的原因。

到目前为止，我也试图把我的代码在一个循环，但循环仍不能正常上复制和粘贴和所有的场景

var cc = $('#cc-card'); 
 

 
// start loop 
 
setInterval(function() { 
 

 
    jQuery(cc).on('propertychange click blur change change keyup keydown paste', function() { 
 

 
    var cctlength = jQuery(this).val().length; 
 

 
    // out put should always be 0000-0000-0000-0000 
 

 
    switch (cctlength) { 
 
     case 4: 
 
     var cctVal = jQuery(this).val(); 
 
     var cctNewVal = cctVal + '-'; 
 
     jQuery(this).val(cctNewVal); 
 
     break; 
 
     case 9: 
 
     var cctVal = jQuery(this).val(); 
 
     var cctNewVal = cctVal + '-'; 
 
     jQuery(this).val(cctNewVal); 
 
     break; 
 
     case 14: 
 
     var cctVal = jQuery(this).val(); 
 
     var cctNewVal = cctVal + '-'; 
 
     jQuery(this).val(cctNewVal); 
 
     break; 
 
     default: 
 
     break; 
 

 
    } 
 

 
    }); 
 

 
    // end loop 
 
}, 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="cc-card" type="text" maxlength="19" placeholder="•••• •••• •••• ••••">

Answer 1

首先，你不” t需要使用setInterval，只要输入值发生更改（使用input事件），您就可以更新。

其次，用户如何随时添加一个值，将其分隔成4个块并在其间插入-？

最后，每次读取值时，都可以去除所有非数字字符，这些字符将删除添加的-以及用户可能添加的任何其他字符。

注意：如果用户在字符串结束之前编辑数字，则还必须重置光标位置，因为更新值会自动将光标移动到结尾。

var cc = $('#cc-card'); 
 

 
function chunksOf(string, size) { 
 
    var i, j, arr = []; 
 
    for (i = 0, j = string.length; i < j; i += size) { 
 
    arr.push(string.substring(i, i + size)); 
 
    } 
 
    return arr; 
 
} 
 

 
cc.on('input', function() { 
 
    var elem = cc.get(0);     // store DOM element ref 
 
    var cursorPosition = elem.selectionEnd; // remember cursor position 
 

 
    var value = cc.val().replace(/\D/g, ''); // strip non-numeric chars 
 
    var numberChunks = chunksOf(value, 4); // split into 4-digit chunks 
 
    var newValue = numberChunks.join('-'); // combine 4-digit chunks into a single string 
 
    cc.val(newValue);      // update new value 
 

 
    elem.selectionStart = elem.selectionEnd = cursorPosition + 1; // reset cursor position since the value changed 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Enter Credit Card:</h3> 
 
<input id="cc-card" type="text" maxlength="19" placeholder="•••• •••• •••• ••••">