jQuery實(shí)現(xiàn)簡(jiǎn)單的日期輸入格式化控件

更新時(shí)間：2015年03月12日 10:05:37 投稿：hebedich

本文給大家分享的是javascript實(shí)現(xiàn)簡(jiǎn)單的日期輸入格式化控件的方法和思路，非常的細(xì)致實(shí)用，推薦給小伙伴們

js代碼有一百多行。

先上效果圖

html代碼

日期： <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="請(qǐng)輸入日期">

設(shè)置input元素類名為 hhm-dateInputer,通過這個(gè)類來綁定這個(gè)日期輸入控件。

js代碼

這里應(yīng)用了jQuery的庫，主要用于選擇元素和綁定事件。

復(fù)制代碼代碼如下:

因?yàn)橛写罅康墨@取和設(shè)置光標(biāo)位置操作，用到了上一篇博客介紹的幾個(gè)工具函數(shù)。

復(fù)制代碼代碼如下:

//獲取光標(biāo)位置 

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;

     }

 }

//設(shè)置光標(biāo)位置

 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); //左邊界移動(dòng)到起點(diǎn)

         range.move("character", index); //光標(biāo)放到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;

     }

 }

//設(shè)置選中范圍

 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); //光標(biāo)移到0位置。

         //這里一定是先moveEnd再moveStart

         //因?yàn)槿绻O(shè)置了左邊界大于了右邊界，那么瀏覽器會(huì)自動(dòng)讓右邊界等于左邊界。

         range.moveEnd("character", rightIndex);

         range.moveStart("character", leftIndex);

         range.select();

     }

 }

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

先講講主要的思路。 其實(shí)是可以畫個(gè)圖這里的，不過我都不曉得該怎么畫，大家提提意見。

首先找到類名為 hhm-dateInputer的元素。

給它綁定兩個(gè)事件處理函數(shù)。 keydown、focus 、blur

　　focus

　　　　判斷如果input元素內(nèi)容為空，那么設(shè)置其初始值為"____-__-__"

　　blur (感謝下面評(píng)論里小伙伴的建議，加上這個(gè)事件更加完美)

　　　　判斷如果input元素內(nèi)容為初始值"____-__-__"，將其值置為空""

keydown

　　　　為什么不是keyup,而是keydown: 我們知道，keydown事件發(fā)生時(shí)，鍵盤上的字符還沒有輸入到輸入框中，這很重要。如果需要，我們?cè)诔绦蛑芯涂梢宰柚共缓线m的字符輸入。

　　　　1.首先從事件對(duì)象event中取得keyCode值，判斷為數(shù)字時(shí)，將數(shù)字后面的下劃線刪除一位。
　　　　2.keyCode值代表刪除鍵時(shí)，刪除數(shù)字，添加一位下劃線。
　　　　3.keyCode的其他情況返回false，阻止字符的輸入。

　　　　上面一二步會(huì)用到setTimeout函數(shù)，在其中執(zhí)行某些操作。使用這個(gè)函數(shù)是因?yàn)閗eyup事件中按鍵字符實(shí)際還沒有作用到文本框中，setTimeout中的操作可以解決這個(gè)問題。

另外代碼中還有一個(gè)很重要的方法 resetCursor,程序中多次調(diào)用這個(gè)方法來把光標(biāo)設(shè)置到合適的輸入位置。

復(fù)制代碼代碼如下:

 //設(shè)置光標(biāo)到正確的位置

 function resetCursor(elem) {

     var value = elem.value;

     var index = value.length;

     //當(dāng)用戶通過選中部分文字并刪除時(shí)，此時(shí)只能將內(nèi)容置為初始格式洛。

     if (elem.value.length !== dateStr.length) {

         elem.value = dateStr;

     }

     //把光標(biāo)放到第一個(gè)_下劃線的前面

     //沒找到下劃線就放到末尾

     var temp = value.search(/_/);

     index = temp > -1 ? temp : index;

     setCursor(elem, index);

 }

完整的js代碼貼在下面咯。

復(fù)制代碼代碼如下:

$(function(){

    var inputs = $(".hhm-dateInputer");

    var dateStr = "____-__-__";

    inputs.each(function(index,elem){

        var input = $(this);

        input.on("keydown",function(event){

            var that = this;   //當(dāng)前觸發(fā)事件的輸入框。

            var key = event.keyCode;

            var cursorIndex = getCursor(that);

            //輸入數(shù)字

            if(key >= 48 && key <= 57){

                //光標(biāo)在日期末尾或光標(biāo)的下一個(gè)字符是"-",返回false,阻止字符顯示。

                if(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;}

                //字符串中無下劃線時(shí)，返回false

                if(that.value.search(/_/) === -1){return false;}

                var fron = that.value.substring(0,cursorIndex); //光標(biāo)之前的文本

                var reg = /(\d)_/;

                setTimeout(function(){ //setTimeout后字符已經(jīng)輸入到文本中

                    //光標(biāo)之后的文本

                    var end = that.value.substring(cursorIndex,that.value.length);

                    //去掉新插入數(shù)字后面的下劃線_

                    that.value = fron + end.replace(reg,"$1");

                    //尋找合適的位置插入光標(biāo)。

                    resetCursor(that);

                },1);

                return true;

                //"Backspace" 刪除鍵

            }else if( key == 8){

                //光標(biāo)在最前面時(shí)不能刪除。  但是考慮全部文本被選中下的刪除情況

                if(!cursorIndex && !getSelection(that).length){ return false;}

                //刪除時(shí)遇到中劃線的處理

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

                    //值為空時(shí)重置

                    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 = "";

            }

        });

    });

    //設(shè)置光標(biāo)到正確的位置

    function resetCursor(elem){

        var value = elem.value;

        var index = value.length;

        //當(dāng)用戶通過選中部分文字并刪除時(shí)，此時(shí)只能將內(nèi)容置為初始格式洛。

        if(elem.value.length !== dateStr.length){

            elem.value = dateStr;

        }

        var temp = value.search(/_/);

        index =  temp> -1? temp: index;

        setCursor(elem,index);

        //把光標(biāo)放到第一個(gè)_下劃線的前面

        //沒找到下劃線就放到末尾

    }

});

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); //左邊界移動(dòng)到起點(diǎn)

        range.move("character",index); //光標(biāo)放到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);  //光標(biāo)移到0位置。

        //這里一定是先moveEnd再moveStart

        //因?yàn)槿绻O(shè)置了左邊界大于了右邊界，那么瀏覽器會(huì)自動(dòng)讓右邊界等于左邊界。

        range.moveEnd("character",rightIndex);

        range.moveStart("character",leftIndex);

        range.select();

    }

}