09月09, 2018

input格式的问题

前几天,接到一个需求是:将输入的手机号以344的格式显示。

其实抛开这个需求,我们来看最本质的东西,就相当于对input的输入做一次控制,比如说上面的344,也可能是银行卡(4位分隔),也可能是mask(就是比如将某一个长的字符串,中间打码,以*显示)。

这个需求实现不难,但难的是:当对中间的内容修改时,光标会跳到最后一位去。这是很蛋疼的事。

好在网上有一些解决的方案:手机号input输入框编辑中格式化的思路与坑

思路就是自己维护cursor的位置,搜索时也找到一个小demo:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">    
</head>
<body>
    <input type="tel" id="phone" onfocus="getCursortPosition(this);" onclick="getCursortPosition(this);" onkeyup="format(this);" maxlength="13"/>
    <script>
        var CaretPos = -1;
        var numLength = 0;
        function valid(value){
            if(value && !/^\d{0,25}$/g.test(value)){
                return value.replace(/[^0-9]/ig, '');
            }
            return value;
        }
        function format(obj){
            var value=valid(obj.value);
            value=value.replace(/\s*/g,"");
            var result=[];
            for(var i=0;i<value.length;i++){
                if(i==3 || i==7){
                    result.push(" "+value.charAt(i));
                }else{
                    result.push(value.charAt(i));
                }
            }
            obj.value=result.join("");
            if(obj.value.length < numLength){
                if(CaretPos == 10 || CaretPos == 5){
                    CaretPos -= 2;
                } else {
                    CaretPos -= 1;
                }
                setCaretPosition(obj, CaretPos);
            }
            console.log(CaretPos);
            if(obj.value.length > numLength){
                if(CaretPos == 8 || CaretPos == 3){
                    CaretPos += 2;
                } else {
                    CaretPos += 1;
                }
                setCaretPosition(obj, CaretPos);

            }
            numLength = obj.value.length;
        }
        function getCursortPosition (ctrl) {
            if (document.selection) {
                ctrl.focus ();
                var Sel = document.selection.createRange();
                Sel.moveStart ('character', -ctrl.value.length);
                CaretPos = Sel.text.length;
            }else if (ctrl.selectionStart || ctrl.selectionStart == '0')
                CaretPos = ctrl.selectionStart;
        }
        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里面,还是有一定的改造成本。

本文链接:www.my-fe.pub/post/input-format-question.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。