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
上面的代碼如果有任何問題，請大家不吝賜教。