jquery版本
<input type="text" id="bankCardNumber">
// 银行卡号输入
$('#bankCardNumber').on('input', function (e) {
e.preventDefault();
let oldSelectionStart = document.querySelector('#bankCardNumber').selectionStart
let value = addNbspTo4(e.target.value.trim())
$(this).val(value);
// 判断光标位置
let newSelectionStart = oldSelectionStart
if (value[oldSelectionStart - 1] == ' ' && e.originalEvent.data !== null) {
newSelectionStart += 1
}
if (value[oldSelectionStart - 1] == ' ' && e.originalEvent.data === null) {
newSelectionStart -= 1
}
document.querySelector('#bankCardNumber').setSelectionRange(newSelectionStart, newSelectionStart)
})
// 银行卡号四位加一个空格
function addNbspTo4(num) {
const formattedStr = num.replace(/\s+/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
return formattedStr
}
vue版本
// 银行卡号四位一组
banknumberInput(e) {
e.preventDefault();
let oldSelectionStart = document.querySelector('#bankCardNumber').selectionStart
let value = this.addNbspTo4(this.banknumber)
this.banknumber = value
// 判断光标位置
let newSelectionStart = oldSelectionStart
if (value[oldSelectionStart - 1] == ' ' && e.data !== null) {
newSelectionStart += 1
}
if (value[oldSelectionStart - 1] == ' ' && e.data === null) {
newSelectionStart -= 1
}
this.$nextTick(() => {
document.querySelector('#bankCardNumber').setSelectionRange(newSelectionStart,
newSelectionStart)
})
},
// 四位一个空格
addNbspTo4(num) {
const formattedStr = num.replace(/\s+/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
return formattedStr
}