输入银行卡，每4位加空格

前几天项目中用到这个，在网上查到一个很好的解决方案 特拿出来分享

Dom

<input type='tel' maxLength=25 class='bank' />

js

// 获取光标位置
function getCursortPosition(textDom) {
    var cursorPos = 0;
    if (document.selection) {
        // IE Support
        textDom.focus();
        var selectRange = document.selection.createRange();
        selectRange.moveStart('character', -textDom.value.length);
        cursorPos = selectRange.text.length;
    } else if (textDom.setSelectionRange) {
        // webkit support
        textDom.focus();
        cursorPos = textDom.selectionStart;
    }
    return cursorPos;
}

// 设置光标位置
function setCaretPosition(textDom, pos) {
    if (textDom.setSelectionRange) {
        textDom.focus();
        textDom.setSelectionRange(pos, pos);
    } else if (textDom.createTextRange) {
        // IE Support
        var range = textDom.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

/**
 * 添加空格
 * @param {*} elem 
 */
function checkNum(elem, isDelete) {
    var str = elem.value;
    var currentPos = getCursortPosition(elem);
    var posAfterText = "";
    var posPreText = "";
    var isNextBlank = false;//后面的是否是空格
    var isPreBlank = false;
    var isLastPos = true;
    if (currentPos != str.length) {//不是最后一个
        posAfterText = str.substr(currentPos, 1);
        posPreText = str.substr(currentPos - 1, 1);
        isNextBlank = /^\s+$/.test(posAfterText);
        isPreBlank = /^\s+$/.test(posPreText);
        isLastPos = false;
    }
    if (elem.value.length <= $(elem).attr("maxlength")) {//最大长度控制
        elem.value = elem.value.replace(/\s/g, '').replace(/(\w{4})(?=\w)/g, "$1 ");
    }
    if (isDelete) {  //删除的时候要关注光标之前有没有空格
        if (isPreBlank) {
            setCaretPosition(elem, currentPos - 1);
        } else {
            setCaretPosition(elem, currentPos);
        }
    } else {   //输入的时候要关注光标后的内容有没有空格
        if (!isLastPos) {
            if (isNextBlank) {
                setCaretPosition(elem, currentPos + 1);
            } else {
                setCaretPosition(elem, currentPos);
            }
        } else {
            setCaretPosition(elem, elem.value.length);
        }
    }
}

使用方法

var isDelete = false;
$(".bank").on("keyup", function (e) {
    var elem = this;
    //加timeout是为了处理安卓部分机型系统键盘无法录入的问题如vivo
    setTimeout(function () { checkNum(elem, isDelete) }, 0);
});
$(".bank").on("keydown", function (e) {
    isDelete = window.event.keyCode == 8;//标记用户进行删除操作
});

逻辑上没有特别复杂的 大家调试一下就能明白。