js代码有一百多行。
日期： <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="请输入日期">
设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件。
这里应用了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 、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,8107 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 !== unde
新闻热点
疑难解答
