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

165 阅读 0 评论 109 点赞

我是靠谱客的博主无情小笼包，最近开发中收集的这篇文章主要介绍jQuery实现简单的日期输入格式化控件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

js代码有一百多行。

先上效果图

html代码

日期： <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="请输入日期">

设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件。

js代码

这里应用了jQuery的库，主要用于选择元素和绑定事件。

复制代码代码如下:

因为有大量的获取和设置光标位置操作，用到了上一篇博客介绍的几个工具函数。

复制代码代码如下:

//获取光标位置 

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();

     }

 }

------------------------- Boom! -----------------------

先讲讲主要的思路。 其实是可以画个图这里的，不过我都不晓得该怎么画，大家提提意见。

首先找到类名为 hhm-dateInputer的元素。

给它绑定两个事件处理函数。 keydown、focus 、blur

　　focus

　　　　判断如果input元素内容为空，那么设置其初始值为"____-__-__"

　　blur (感谢下面评论里小伙伴的建议，加上这个事件更加完美)

　　　　判断如果input元素内容为初始值"____-__-__"，将其值置为空""

keydown

　　　　为什么不是keyup,而是keydown: 我们知道，keydown事件发生时，键盘上的字符还没有输入到输入框中，这很重要。如果需要，我们在程序中就可以阻止不合适的字符输入。

　　　　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();

    }

}