js格式化input輸入框內容（每幾位分一組，並使用特定字符分隔）

本文轉載自查看原文 2017-11-03 14:55 1956

<html>
<head>
    <title></title>
</head>
<body>

    <input id="inputDom" />


    <script type="text/javascript">
        var inputDom = document.getElementById('inputDom');
        var maxLen = 0;
        inputDom.oninput = function() {
            var value = this.value;
            var valueLen = value.length;
            var foucsNum = getCursortPosition(inputDom);
            if(valueLen > 0){  
                var c = value.replace(/\s/g,  "");  
                var Len = c.length;
                var List = c.split('');
                var initNum = 0;
                for(var i=1;i<Len;i++) {
                    if(i%4 == 0) {　　//每四位分一組
                        List.splice(i+initNum,0,' ');　　//此處為使用空格分隔
                        initNum++
                    }
                }
                this.value  = List.join('');

                if(maxLen < this.value.length) {
                    if(foucsNum%5 == 0) {
                        setTimeout(function() {
                            setCaretPosition(inputDom,foucsNum+1)
                        },0);
                    }else {
                        setTimeout(function() {
                            setCaretPosition(inputDom,foucsNum)
                        },0);
                    }
                }else {
                    if(foucsNum%5 == 0) {
                        setTimeout(function() {
                            setCaretPosition(inputDom,foucsNum-1)
                        },0);
                    }else {
                        setTimeout(function() {
                            setCaretPosition(inputDom,foucsNum)
                        },0);
                    }
                }
                maxLen = this.value.length;
            }
        }
　　　　　//控制光標移動時，需要使用定時器，避免出現光標控制失效的情況
        function getCursortPosition(ctrl) {        //獲取光標的位置
            var CaretPos = 0;   // IE Support
            if (document.selection) {
                ctrl.focus();
                var Sel = document.selection.createRange();
                Sel.moveStart ('character', -ctrl.value.length);
                CaretPos = Sel.text.length;
            }
            // Firefox support
            else if (ctrl.selectionStart || ctrl.selectionStart == '0')
                CaretPos = ctrl.selectionStart;
            return (CaretPos);
        }

        function setCaretPosition(ctrl, pos) {        //設置光標的位置
            if(ctrl.setSelectionRange){
                ctrl.focus();
                ctrl.setSelectionRange(pos,pos);
            }
            else if (ctrl.createTextRange) {
                var range = ctrl.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        }
    </script>
</body>
</html>

　　如果以上代碼無法滿足業務需要，可以使用插件Cleave.js，進行input框中數據的格式化；

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 輸入框內格式化金額、銀行卡號 Input輸入框內容限制微信小程序獲取input輸入框內容 JavaScript獲取輸入框內容 js實現數字轉換為逗號分隔的格式化字符串 js格式化數字金額按千位逗號分隔顯示輸入框時光標自動定位到輸入框內容的最后 php格式化數字千位分隔符 NSNumber格式化轉換為NSString添加千位分隔符 java 有千位分隔逗號的數字格式化輸出數字前補0輸出