你的位置:首页 > Java教程

[Java教程]一个简单的日期输入格式化控件。


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,820     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,832     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,842     var range = elem.createTextRange();43     range.move("character", -elem.value.length); //光标移到0位置。44     //这里一定是先moveEnd再moveStart45     //因为如果设置了左边界大于了右边界,那么浏览器会自动让右边界等于左边界。46     range.moveEnd("character", rightIndex);47     range.moveStart("character", leftIndex);48      range.select();49    }50 }

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

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

     首先找到类名为 hhm-dateInputer的元素。

     给它绑定两个事件处理函数。 keydown、focus

  focus

    判断如果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         // window.event1 = event; 8         var that = this; //当前触发事件的输入框。 9         var key = event.keyCode; 10         var cursorIndex = getCursor(that); 11  12         //输入数字 13         if (key >= 48 && key <= 57) { 14           //光标在日期末尾或光标的下一个字符是"-",返回false,阻止字符显示。 15           if (cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") { 16             return false; 17            } 18           //字符串中无下划线时,返回false 19           if (that.value.search(/_/) === -1) { 20             return false; 21            } 22  23           var fron = that.value.substring(0, cursorIndex); //光标之前的文本 24           var reg = /(\d)_/; 25           setTimeout(function() { //setTimeout后字符已经输入到文本中 26             //光标之后的文本 27             var end = that.value.substring(cursorIndex, that.value.length); 28             //去掉新插入数字后面的下划线_ 29             that.value = fron + end.replace(reg, "$1"); 30             //寻找合适的位置插入光标。 31              resetCursor(that); 32           }, 1); 33           return true; 34         //输入"Backspace" 删除键 35         } else if (key == 8) { 36  37           //光标在最前面时不能删除。 但是考虑全部文本被选中下的删除情况 38           if (!cursorIndex && !getSelection(that).length) { 39             return false; 40            } 41           //删除时遇到中划线的处理 42           if (that.value.charAt(cursorIndex - 1) == "-") { 43             var ar = that.value.split(""); 44             ar.splice(cursorIndex - 2, 1, "_"); 45             that.value = ar.join(""); 46              resetCursor(that); 47             return false; 48            } 49           setTimeout(function() { 50             //值为空时重置 51             if (that.value === "") { 52               that.value = "____-__-__"; 53                resetCursor(that); 54              } 55             //删除的位置加上下划线 56             var cursor = getCursor(that); 57             var ar = that.value.split(""); 58             ar.splice(cursor, 0, "_"); 59             that.value = ar.join(""); 60              resetCursor(that); 61           }, 1); 62  63           return true; 64          } 65         return false; 66  67        }); 68       input.on("focus", function(event) { 69         if (!this.value) { 70           this.value = "____-__-__"; 71          } 72         resetCursor(this); 73        }); 74      }); 75     //设置光标到正确的位置 76     function resetCursor(elem) { 77       var value = elem.value; 78       var index = value.length; 79       //当用户通过选中部分文字并删除时,此时只能将内容置为初始格式洛。 80  81       if (elem.value.length !== dateStr.length) { 82         elem.value = dateStr; 83        } 84       var temp = value.search(/_/); 85       index = temp > -1 ? temp : index; 86        setCursor(elem, index); 87       //把光标放到第一个_下划线的前面 88       //没找到下划线就放到末尾 89      } 90    }); 91  92   function getCursor(elem) { 93     //IE 9 ,10,其他浏览器 94     if (elem.selectionStart !== undefined) { 95       return elem.selectionStart; 96     } else { //IE 6,7,8 97       var range = document.selection.createRange(); 98       range.moveStart("character", -elem.value.length); 99       var len = range.text.length;100       return len;101      }102    }103 104   function setCursor(elem, index) {105     //IE 9 ,10,其他浏览器106     if (elem.selectionStart !== undefined) {107       elem.selectionStart = index;108       elem.selectionEnd = index;109     } else { //IE 6,7,8110       var range = elem.createTextRange();111       range.moveStart("character", -elem.value.length); //左边界移动到起点112       range.move("character", index); //光标放到index位置113        range.select();114      }115    }116 117   function getSelection(elem) {118     //IE 9 ,10,其他浏览器119     if (elem.selectionStart !== undefined) {120       return elem.value.substring(elem.selectionStart, elem.selectionEnd);121     } else { //IE 6,7,8122       var range = document.selection.createRange();123       return range.text;124      }125    }126 127   function setSelection(elem, leftIndex, rightIndex) {128     if (elem.selectionStart !== undefined) { //IE 9 ,10,其他浏览器129       elem.selectionStart = leftIndex;130       elem.selectionEnd = rightIndex;131     } else { //IE 6,7,8132       var range = elem.createTextRange();133       range.move("character", -elem.value.length); //光标移到0位置。134       //这里一定是先moveEnd再moveStart135       //因为如果设置了左边界大于了右边界,那么浏览器会自动让右边界等于左边界。136       range.moveEnd("character", rightIndex);137       range.moveStart("character", leftIndex);138        range.select();139      }140   }

 

结束语

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

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

  插件可能有些bug

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