jQuery輸入時間日期自動格式化效果

antzone發表於2017-04-05
jQuery

如果在文字框輸入時間日期的時候，能夠自動進行格式化處理。那麼對於使用者來說人性化程度會得到極大的提高，下面就是一個能夠實現此功能的程式碼示例。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
 
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(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();
  }
}
</script>
<body>
<input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="請輸入日期">
</body>
</html>


相關文章