jQuery實作簡單的日期輸入格式化控制項_jquery

js程式碼有一百多行。

先上效果圖

 html代碼

日期：

設定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                 //遊標在日期末或遊標的下一個字元為"-",回傳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 定;
                }
                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

上面的程式碼如果有任何問題，請大家不吝賜教。

以上就是本文的全部內容了，希望大家能夠喜歡。