jquery銀行卡4位特效的實現(xiàn)

$(document).ready(function() {
$('.card-number').on('keyup', function() {
var val = $(this).val().replace(/\s/g, '');
var num = val.replace(/[^\d]/g, '');
var arr = num.split('');
arr = arr.filter(function(n) {
return n !== undefined || nulls
});
for (var i = 4; i< arr.length; i += 5) {
arr.splice(i, 0, ' ');
}
$(this).val(arr.join(''));
});
});

這個特效主要是對銀行卡號輸入時自動添加空格，每4個數(shù)字添加一個空格，以方便用戶閱讀。

首先，在DOM加載完成時，我們通過jQuery選擇器綁定了每個銀行卡輸入框的keyup事件。在用戶每次輸入時，我們通過val()函數(shù)獲取輸入框中的內(nèi)容，并通過正則表達式匹配非數(shù)字字符并替換為空格。然后我們通過split()函數(shù)將字符串分割為數(shù)組，去掉undefined和null元素。

接著，我們在每個數(shù)組元素后添加空格。通過循環(huán)arr數(shù)組，每隔4個元素插入一個空格。最后我們使用join()函數(shù)將數(shù)組元素連接成一個字符串，然后將其賦值給輸入框。

這樣就輕松實現(xiàn)了銀行卡號輸入框的4位特效。