jQuery实现简单的日期输入格式化控件(2)

    1.首先从事件对象event中取得keyCode值,判断为数字时,将数字后面的下划线删除一位。
    2.keyCode值代表删除键时,删除数字,添加一位下划线。
    3.keyCode的其他情况返回false,阻止字符的输入。

    上面一二步会用到setTimeout函数,在其中执行某些操作。 使用这个函数是因为keyup事件中按键字符实际还没有作用到文本框中,setTimeout中的操作可以解决这个问题。

另外代码中还有一个很重要的方法 resetCursor,程序中多次调用这个方法来把光标设置到合适的输入位置。

复制代码 代码如下:


 //设置光标到正确的位置
 function resetCursor(elem) {
     var value = elem.value;
     var index = value.length;
     //当用户通过选中部分文字并删除时,此时只能将内容置为初始格式洛。
     if (elem.value.length !== dateStr.length) {
         elem.value = dateStr;
     }
     //把光标放到第一个_下划线的前面
     //没找到下划线就放到末尾
     var temp = value.search(/_/);
     index = temp > -1 ? temp : index;
     setCursor(elem, index);
 }

完整的js代码贴在下面咯。

复制代码 代码如下:


$(function(){
    var inputs = $(".hhm-dateInputer");
    var dateStr = "____-__-__";
    inputs.each(function(index,elem){
        var input = $(this);
        input.on("keydown",function(event){
            var that = this;   //当前触发事件的输入框。
            var key = event.keyCode;
            var cursorIndex = getCursor(that);
            //输入数字
            if(key >= 48 && key <= 57){
                //光标在日期末尾或光标的下一个字符是"-",返回false,阻止字符显示。
                if(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;}
                //字符串中无下划线时,返回false
                if(that.value.search(/_/) === -1){return false;}
                var fron = that.value.substring(0,cursorIndex); //光标之前的文本
                var reg = /(\d)_/;
                setTimeout(function(){ //setTimeout后字符已经输入到文本中
                    //光标之后的文本
                    var end = that.value.substring(cursorIndex,that.value.length);
                    //去掉新插入数字后面的下划线_
                    that.value = fron + end.replace(reg,"$1");
                    //寻找合适的位置插入光标。
                    resetCursor(that);
                },1);
                return true;
                //"Backspace" 删除键
            }else if( key == 8){
                //光标在最前面时不能删除。  但是考虑全部文本被选中下的删除情况
                if(!cursorIndex && !getSelection(that).length){ return false;}
                //删除时遇到中划线的处理
                if(that.value.charAt(cursorIndex -1 ) == "-"){
                    var ar = that.value.split("");
                    ar.splice(cursorIndex-2,1,"_");
                    that.value = ar.join("");
                    resetCursor(that);
                    return false;
                }
                setTimeout(function(){
                    //值为空时重置
                    if(that.value === "") {
                        that.value = "____-__-__";
                        resetCursor(that);
                    }
                    //删除的位置加上下划线
                    var cursor = getCursor(that);
                    var ar = that.value.split("");
                    ar.splice(cursor,0,"_");
                    that.value = ar.join("");
                    resetCursor(that);
                },1);
                return true;
            }
            return false;
        });
        input.on("focus",function(){
            if(!this.value){
                this.value = "____-__-__";
            }
            resetCursor(this);
        });
        input.on("blur",function(){
            if(this.value === "____-__-__"){
                this.value = "";
            }
        });
    });
    //设置光标到正确的位置
    function resetCursor(elem){
        var value = elem.value;
        var index = value.length;
        //当用户通过选中部分文字并删除时,此时只能将内容置为初始格式洛。
        if(elem.value.length !== dateStr.length){
            elem.value = dateStr;
        }
        var temp = value.search(/_/);
        index =  temp> -1? temp: index;
        setCursor(elem,index);
        //把光标放到第一个_下划线的前面
        //没找到下划线就放到末尾
    }
});
function getCursor(elem){
    //IE 9 ,10,其他浏览器
    if(elem.selectionStart !== undefined){
        return elem.selectionStart;
    } else{ //IE 6,7,8
        var range = document.selection.createRange();
        range.moveStart("character",-elem.value.length);
        var len = range.text.length;
        return len;
    }
}
function setCursor(elem,index){
    //IE 9 ,10,其他浏览器
    if(elem.selectionStart !== undefined){
        elem.selectionStart = index;
        elem.selectionEnd = index;
    } else{//IE 6,7,8
        var range = elem.createTextRange();
        range.moveStart("character",-elem.value.length); //左边界移动到起点
        range.move("character",index); //光标放到index位置
        range.select();
    }
}
function getSelection(elem){
    //IE 9 ,10,其他浏览器
    if(elem.selectionStart !== undefined){
        return elem.value.substring(elem.selectionStart,elem.selectionEnd);
    } else{ //IE 6,7,8
        var range = document.selection.createRange();
        return range.text;
    }
}
function setSelection(elem,leftIndex,rightIndex){
    if(elem.selectionStart !== undefined){ //IE 9 ,10,其他浏览器
        elem.selectionStart = leftIndex;
        elem.selectionEnd = rightIndex;
    } else{//IE 6,7,8
        var range = elem.createTextRange();
        range.move("character",-elem.value.length);  //光标移到0位置。
        //这里一定是先moveEnd再moveStart
        //因为如果设置了左边界大于了右边界,那么浏览器会自动让右边界等于左边界。
        range.moveEnd("character",rightIndex);
        range.moveStart("character",leftIndex);
        range.select();
    }
}

结束语

这个插件可能还有一些需要完善的地方。

  缺少通过js调用为元素绑定此插件的接口

  插件可能有些bug

上面的代码如果有任何问题,请大家不吝赐教。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfwpz.html