Input输入框输入过程中格式化银行卡号4位一空格并正确调整光标位置

最新推荐文章于 2024-03-12 14:41:06 发布

u010829095

最新推荐文章于 2024-03-12 14:41:06 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签：银行卡号格式化光标位置调整

本文链接：https://blog.csdn.net/u010829095/article/details/85854828

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<input type="tel" id="bankCard" />

document.getElementById('bankCard').addEventListener('input',function () {
    formatInput(this,/\D/g,19);
},false)

//格式化  /[^0-9,X]/g 身份证  /\D/g 银行卡
function formatInput(elem,patten,len) {
    var curpos = elem.selectionStart;
    var old_value = elem.value;
    if (elem.value.replace(patten, '').length > len) {
        elem.value = paddingSpace(elem.value.replace(patten, '')
            .substring(0, len));
    } else {
        elem.value = paddingSpace(elem.value.replace(patten, ''));
    }
    if (old_value[curpos - 1] == ' ') {
        curpos += -1;
    } else {
        var old_cursor = old_value.slice(0, curpos);
        var old_cursor_spaced = paddingSpace(old_cursor.replace(patten,''));
        curpos += old_cursor_spaced.length - old_cursor.length;
    }
    setTimeout(function() {
        elem.focus();
        //设置光标位置
        elem.setSelectionRange(curpos, curpos);
    }, 0);
}
// 格式化空格
function paddingSpace(str){
    return str.replace(/....(?!$)/g,'$& ')
    // return str.replace(/\s/,'').replace(/([0-9,X]{4})(?=[0-9,X])/g,"$1 ");
}