移動web處理input輸入框輸入銀行卡號四位一空格

由於項目上有需求要求輸入銀行卡號四位一空格的需求，改過好幾版發現都有bug,最后優化了一版看起來效果還行，發帖留存。

難點是從中間插入和刪除處理光標問題。

首先需要用到獲取光標和設置光標的方法。

// 獲取光標位置
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();
    }
}
/**
 * 賬號輸入時自動4位一空格
 */
$(function () {
    var isDelete = false;
    $("input[data-type='acc']").on("keyup", function (e) {
        var elem = this;
        //加timeout是為了處理安卓部分機型系統鍵盤無法錄入的問題如vivo
        setTimeout(function(){
            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);
                }
            }
        },0);
    });
    $("input[data-type='acc']").on("keydown", function (e) {
        //console.log("keyCode=" + window.event.keyCode);
        isDelete = window.event.keyCode == 8;//標記用戶進行刪除操作
    });

})