創建信用卡輸入。爲什麼表格不能爲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="•••• •••• •••• ••••">