一个简单的日期输入格式化控件。

js代码有一百多行。

先上效果图

html代码

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

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

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! -----------------------

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

首先找到类名为 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代码贴在下面咯。

  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      }

结束语

这个插件可能还有一些需要完善的地方。

　　缺少通过js调用为元素绑定此插件的接口

　　插件可能有些bug

上面的代码如果有任何问题，请大家不吝赐教。

posted on 2015-03-10 17:52 cheerfulCoder 阅读(6915) 评论(4) 编辑收藏举报