一個簡單的日期輸入格式化控件。

時間 2019-11-30

標籤一個簡單日期輸入格式化控件简体版

原文原文鏈接

js代碼有一百多行。html

先上效果圖

html代碼

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

設置input元素類名爲 hhm-dateInputer,經過這個類來綁定這個日期輸入控件。jquery

js代碼

這裏應用了jQuery的庫，主要用於選擇元素和綁定事件。瀏覽器

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

由於有大量的獲取和設置光標位置操做，用到了上一篇博客介紹的幾個工具函數。函數

 1 //獲取光標位置 
 2 function getCursor(elem) {  3      //IE 9 ，10，其餘瀏覽器
 4      if (elem.selectionStart !== undefined) {  5          return elem.selectionStart;  6      } else { //IE 6,7,8
 7          var range = document.selection.createRange();  8          range.moveStart("character", -elem.value.length);  9          var len = range.text.length; 10          return len; 11  } 12  } 13 //設置光標位置
14  function setCursor(elem, index) { 15      //IE 9 ，10，其餘瀏覽器
16      if (elem.selectionStart !== undefined) { 17          elem.selectionStart = index; 18          elem.selectionEnd = index; 19      } else { //IE 6,7,8
20          var range = elem.createTextRange(); 21          range.moveStart("character", -elem.value.length); //左邊界移動到起點
22          range.move("character", index); //光標放到index位置
23  range.select(); 24  } 25  } 26 //獲取選中文字
27  function getSelection(elem) { 28      //IE 9 ，10，其餘瀏覽器
29      if (elem.selectionStart !== undefined) { 30          return elem.value.substring(elem.selectionStart, elem.selectionEnd); 31      } else { //IE 6,7,8
32          var range = document.selection.createRange(); 33          return range.text; 34  } 35  } 36 //設置選中範圍
37  function setSelection(elem, leftIndex, rightIndex) { 38      if (elem.selectionStart !== undefined) { //IE 9 ，10，其餘瀏覽器
39          elem.selectionStart = leftIndex; 40          elem.selectionEnd = rightIndex; 41      } else { //IE 6,7,8
42          var range = elem.createTextRange(); 43          range.move("character", -elem.value.length); //光標移到0位置。
44          //這裏必定是先moveEnd再moveStart
45          //由於若是設置了左邊界大於了右邊界，那麼瀏覽器會自動讓右邊界等於左邊界。
46          range.moveEnd("character", rightIndex); 47          range.moveStart("character", leftIndex); 48  range.select(); 49  } 50  }

------------------------- Boom! -----------------------工具

先講講主要的思路。實際上是能夠畫個圖這裏的，不過我都不曉得該怎麼畫，你們提提意見。this

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

給它綁定兩個事件處理函數。 keydown、focus 、blur插件

　　focuscode

　　　　判斷若是input元素內容爲空，那麼設置其初始值爲"____-__-__"htm

　　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代碼貼在下面咯。

  1      $(function(){
  2          var inputs = $(".hhm-dateInputer");
  3          var dateStr = "____-__-__";
  4          inputs.each(function(index,elem){
  5              var input = $(this);
  6              input.on("keydown",function(event){
  7                  var that = this;   //當前觸發事件的輸入框。
  8                  var key = event.keyCode;
  9                  var cursorIndex = getCursor(that);
 10 
 11                  //輸入數字
 12                  if(key >= 48 && key <= 57){
 13                      //光標在日期末尾或光標的下一個字符是"-",返回false,阻止字符顯示。
 14                      if(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;}
 15                      //字符串中無下劃線時，返回false
 16                      if(that.value.search(/_/) === -1){return false;}
 17 
 18                      var fron = that.value.substring(0,cursorIndex); //光標以前的文本
 19                      var reg = /(\d)_/;
 20                      setTimeout(function(){ //setTimeout後字符已經輸入到文本中
 21                          //光標以後的文本
 22                          var end = that.value.substring(cursorIndex,that.value.length);
 23                          //去掉新插入數字後面的下劃線_
 24                          that.value = fron + end.replace(reg,"$1");
 25                          //尋找合適的位置插入光標。
 26                          resetCursor(that);
 27                      },1);
 28                      return true;
 29                      //"Backspace" 刪除鍵
 30                  }else if( key == 8){
 31 
 32                      //光標在最前面時不能刪除。  可是考慮所有文本被選中下的刪除狀況
 33                      if(!cursorIndex && !getSelection(that).length){ return false;}
 34                      //刪除時遇到中劃線的處理
 35                      if(that.value.charAt(cursorIndex -1 ) == "-"){
 36                          var ar = that.value.split("");
 37                          ar.splice(cursorIndex-2,1,"_");
 38                          that.value = ar.join("");
 39                          resetCursor(that);
 40                          return false;
 41                      }
 42                      setTimeout(function(){
 43                          //值爲空時重置
 44                          if(that.value === "") {
 45                              that.value = "____-__-__";
 46                              resetCursor(that);
 47                          }
 48                          //刪除的位置加上下劃線
 49                          var cursor = getCursor(that);
 50                          var ar = that.value.split("");
 51                          ar.splice(cursor,0,"_");
 52                          that.value = ar.join("");
 53                          resetCursor(that);
 54                      },1);
 55 
 56                      return true;
 57                  }
 58                  return false;
 59 
 60              });
 61              input.on("focus",function(){
 62                  if(!this.value){
 63                      this.value = "____-__-__";
 64                  }
 65                  resetCursor(this);
 66              });
 67              input.on("blur",function(){
 68                  if(this.value === "____-__-__"){
 69                      this.value = "";
 70                  }
 71              });
 72          });
 73          //設置光標到正確的位置
 74          function resetCursor(elem){
 75              var value = elem.value;
 76              var index = value.length;
 77              //當用戶經過選中部分文字並刪除時，此時只能將內容置爲初始格式洛。
 78 
 79              if(elem.value.length !== dateStr.length){
 80                  elem.value = dateStr;
 81              }
 82              var temp = value.search(/_/);
 83              index =  temp> -1? temp: index;
 84              setCursor(elem,index);
 85              //把光標放到第一個_下劃線的前面
 86              //沒找到下劃線就放到末尾
 87          }
 88      });
 89 
 90      function getCursor(elem){
 91          //IE 9 ，10，其餘瀏覽器
 92          if(elem.selectionStart !== undefined){
 93              return elem.selectionStart;
 94          } else{ //IE 6,7,8
 95              var range = document.selection.createRange();
 96              range.moveStart("character",-elem.value.length);
 97              var len = range.text.length;
 98              return len;
 99          }
100      }
101      function setCursor(elem,index){
102          //IE 9 ，10，其餘瀏覽器
103          if(elem.selectionStart !== undefined){
104              elem.selectionStart = index;
105              elem.selectionEnd = index;
106          } else{//IE 6,7,8
107              var range = elem.createTextRange();
108              range.moveStart("character",-elem.value.length); //左邊界移動到起點
109              range.move("character",index); //光標放到index位置
110              range.select();
111          }
112      }
113      function getSelection(elem){
114          //IE 9 ，10，其餘瀏覽器
115          if(elem.selectionStart !== undefined){
116              return elem.value.substring(elem.selectionStart,elem.selectionEnd);
117          } else{ //IE 6,7,8
118              var range = document.selection.createRange();
119              return range.text;
120          }
121      }
122      function setSelection(elem,leftIndex,rightIndex){
123          if(elem.selectionStart !== undefined){ //IE 9 ，10，其餘瀏覽器
124              elem.selectionStart = leftIndex;
125              elem.selectionEnd = rightIndex;
126          } else{//IE 6,7,8
127              var range = elem.createTextRange();
128              range.move("character",-elem.value.length);  //光標移到0位置。
129              //這裏必定是先moveEnd再moveStart
130              //由於若是設置了左邊界大於了右邊界，那麼瀏覽器會自動讓右邊界等於左邊界。
131              range.moveEnd("character",rightIndex);
132              range.moveStart("character",leftIndex);
133              range.select();
134          }
135      }