jQuery實(shí)現(xiàn)簡單的日期輸入格式化控件
更新時(shí)間：2015年03月12日 10:05:37 投稿：hebedich
本文給大家分享的是javascript實(shí)現(xiàn)簡單的日期輸入格式化控件的方法和思路，非常的細(xì)致實(shí)用，推薦給小伙伴們
js代碼有一百多行。
先上效果圖
html代碼
日期： <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="請輸入日期">
設(shè)置input元素類名為 hhm-dateInputer,通過這個(gè)類來綁定這個(gè)日期輸入控件。
js代碼
這里應(yīng)用了jQuery的庫， 主要用于選擇元素和綁定事件。
復(fù)制代碼 代碼如下:
<script src=">
因?yàn)橛写罅康墨@取和設(shè)置光標(biāo)位置操作，用到了上一篇博客介紹的幾個(gè)工具函數(shù)。
復(fù)制代碼 代碼如下:
//獲取光標(biāo)位置
function getCursor(elem) {
//IE 9 ，10，其他瀏覽器
if (elem.selectionStart !== undefined) {
return elem.selectionStart;
} else { //IE 6,7,8
var range = document.selection.createRange();
range.moveStart("character", -elem.value.length);
var len = range.text.length;
return len;
}
}
//設(shè)置光標(biāo)位置
function setCursor(elem, index) {
//IE 9 ，10，其他瀏覽器
if (elem.selectionStart !== undefined) {
elem.selectionStart = index;
elem.selectionEnd = index;
} else { //IE 6,7,8
var range = elem.createTextRange();
range.moveStart("character", -elem.value.length); //左邊界移動(dòng)到起點(diǎn)
range.move("character", index); //光標(biāo)放到index位置
range.select();
}
}
//獲取選中文字
function getSelection(elem) {
//IE 9 ，10，其他瀏覽器
if (elem.selectionStart !== undefined) {
return elem.value.substring(elem.selectionStart, elem.selectionEnd);
} else { //IE 6,7,8
var range = document.selection.createRange();
return range.text;
}
}
//設(shè)置選中范圍
function setSelection(elem, leftIndex, rightIndex) {
if (elem.selectionStart !== undefined) { //IE 9 ，10，其他瀏覽器
elem.selectionStart = leftIndex;
elem.selectionEnd = rightIndex;
} else { //IE 6,7,8
var range = elem.createTextRange();
range.move("character", -elem.value.length); //光標(biāo)移到0位置。
//這里一定是先moveEnd再moveStart
//因?yàn)槿绻O(shè)置了左邊界大于了右邊界，那么瀏覽器會(huì)自動(dòng)讓右邊界等于左邊界。
range.moveEnd("character", rightIndex);
range.moveStart("character", leftIndex);
range.select();
}
}
------------------------- Boom! -----------------------
先講講主要的思路。 其實(shí)是可以畫個(gè)圖這里的，不過我都不曉得該怎么畫，大家提提意見。
首先找到類名為 hhm-dateInputer的元素。
給它綁定兩個(gè)事件處理函數(shù)。 keydown、focus 、blur
focus
判斷如果input元素內(nèi)容為空，那么設(shè)置其初始值為"____-__-__"
blur (感謝下面評論里小伙伴的建議，加上這個(gè)事件更加完美)
判斷如果input元素內(nèi)容為初始值"____-__-__"，將其值置為空""
keydown
為什么不是keyup,而是keydown: 我們知道，keydown事件發(fā)生時(shí)，鍵盤上的字符還沒有輸入到輸入框中，這很重要。如果需要，我們在程序中就可以阻止不合適的字符輸入。
1.首先從事件對象event中取得keyCode值，判斷為數(shù)字時(shí)，將數(shù)字后面的下劃線刪除一位。
2.keyCode值代表刪除鍵時(shí)，刪除數(shù)字，添加一位下劃線。
3.keyCode的其他情況返回false，阻止字符的輸入。
上面一二步會(huì)用到setTimeout函數(shù)，在其中執(zhí)行某些操作。 使用這個(gè)函數(shù)是因?yàn)閗eyup事件中按鍵字符實(shí)際還沒有作用到文本框中，setTimeout中的操作可以解決這個(gè)問題。
另外代碼中還有一個(gè)很重要的方法 resetCursor,程序中多次調(diào)用這個(gè)方法來把光標(biāo)設(shè)置到合適的輸入位置。
復(fù)制代碼 代碼如下:
//設(shè)置光標(biāo)到正確的位置
function resetCursor(elem) {
var value = elem.value;
var index = value.length;
//當(dāng)用戶通過選中部分文字并刪除時(shí)，此時(shí)只能將內(nèi)容置為初始格式洛。
if (elem.value.length !== dateStr.length) {
elem.value = dateStr;
}
//把光標(biāo)放到第一個(gè)_下劃線的前面
//沒找到下劃線就放到末尾
var temp = value.search(/_/);
index = temp > -1 ? temp : index;
setCursor(elem, index);
}
完整的js代碼貼在下面咯。
復(fù)制代碼 代碼如下:
$(function(){
var inputs = $(".hhm-dateInputer");
var dateStr = "____-__-__";
inputs.each(function(index,elem){
var input = $(this);
input.on("keydown",function(event){
var that = this; //當(dāng)前觸發(fā)事件的輸入框。
var key = event.keyCode;
var cursorIndex = getCursor(that);
//輸入數(shù)字
if(key >= 48 && key <= 57){
//光標(biāo)在日期末尾或光標(biāo)的下一個(gè)字符是"-",返回false,阻止字符顯示。
if(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;}
//字符串中無下劃線時(shí)，返回false
if(that.value.search(/_/) === -1){return false;}
var fron = that.value.substring(0,cursorIndex); //光標(biāo)之前的文本
var reg = /(\d)_/;
setTimeout(function(){ //setTimeout后字符已經(jīng)輸入到文本中
//光標(biāo)之后的文本
var end = that.value.substring(cursorIndex,that.value.length);
//去掉新插入數(shù)字后面的下劃線_
that.value = fron + end.replace(reg,"$1");
//尋找合適的位置插入光標(biāo)。
resetCursor(that);
},1);
return true;
//"Backspace" 刪除鍵
}else if( key == 8){
//光標(biāo)在最前面時(shí)不能刪除。 但是考慮全部文本被選中下的刪除情況
if(!cursorIndex && !getSelection(that).length){ return false;}
//刪除時(shí)遇到中劃線的處理
if(that.value.charAt(cursorIndex -1 ) == "-"){
var ar = that.value.split("");
ar.splice(cursorIndex-2,1,"_");
that.value = ar.join("");
resetCursor(that);
return false;
}
setTimeout(function(){
//值為空時(shí)重置
if(that.value === "") {
that.value = "____-__-__";
resetCursor(that);
}
//刪除的位置加上下劃線
var cursor = getCursor(that);
var ar = that.value.split("");
ar.splice(cursor,0,"_");
that.value = ar.join("");
resetCursor(that);
},1);
return true;
}
return false;
});
input.on("focus",function(){
if(!this.value){
this.value = "____-__-__";
}
resetCursor(this);
});
input.on("blur",function(){
if(this.value === "____-__-__"){
this.value = "";
}
});
});
//設(shè)置光標(biāo)到正確的位置
function resetCursor(elem){
var value = elem.value;
var index = value.length;
//當(dāng)用戶通過選中部分文字并刪除時(shí)，此時(shí)只能將內(nèi)容置為初始格式洛。
if(elem.value.length !== dateStr.length){
elem.value = dateStr;
}
var temp = value.search(/_/);
index = temp> -1? temp: index;
setCursor(elem,index);
//把光標(biāo)放到第一個(gè)_下劃線的前面
//沒找到下劃線就放到末尾
}
});
function getCursor(elem){
//IE 9 ，10，其他瀏覽器
if(elem.selectionStart !== undefined){
return elem.selectionStart;
} else{ //IE 6,7,8
var range = document.selection.createRange();
range.moveStart("character",-elem.value.length);
var len = range.text.length;
return len;
}
}
function setCursor(elem,index){
//IE 9 ，10，其他瀏覽器
if(elem.selectionStart !== undefined){
elem.selectionStart = index;
elem.selectionEnd = index;
} else{//IE 6,7,8
var range = elem.createTextRange();
range.moveStart("character",-elem.value.length); //左邊界移動(dòng)到起點(diǎn)
range.move("character",index); //光標(biāo)放到index位置
range.select();
}
}
function getSelection(elem){
//IE 9 ，10，其他瀏覽器
if(elem.selectionStart !== undefined){
return elem.value.substring(elem.selectionStart,elem.selectionEnd);
} else{ //IE 6,7,8
var range = document.selection.createRange();
return range.text;
}
}
function setSelection(elem,leftIndex,rightIndex){
if(elem.selectionStart !== undefined){ //IE 9 ，10，其他瀏覽器
elem.selectionStart = leftIndex;
elem.selectionEnd = rightIndex;
} else{//IE 6,7,8
var range = elem.createTextRange();
range.move("character",-elem.value.length); //光標(biāo)移到0位置。
//這里一定是先moveEnd再moveStart
//因?yàn)槿绻O(shè)置了左邊界大于了右邊界，那么瀏覽器會(huì)自動(dòng)讓右邊界等于左邊界。
range.moveEnd("character",rightIndex);
range.moveStart("character",leftIndex);
range.select();
}
}
結(jié)束語
這個(gè)插件可能還有一些需要完善的地方。
缺少通過js調(diào)用為元素綁定此插件的接口
插件可能有些bug
上面的代碼如果有任何問題，請大家不吝賜教。
以上就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
這篇文章主要介紹了jquery制作的移動(dòng)端購物車效果,結(jié)合完整實(shí)例形式詳細(xì)分析了jQuery移動(dòng)端購物車具體功能實(shí)現(xiàn)、數(shù)值計(jì)算、界面布局與顯示效果相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
看完jquery基礎(chǔ)教程做的筆記，筆記并不適合所有人，覺得好，可以看，覺得不好，可以不看。2008-07-07
jQuery實(shí)現(xiàn)的簡單日歷組件定義與用法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單日歷組件定義與用法,結(jié)合實(shí)例形式詳細(xì)分析了基于jQuery擴(kuò)展實(shí)現(xiàn)日歷功能的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
本文為大家詳細(xì)介紹下父窗口中操作iframe、在子窗口中操作父窗口，獲取iframe內(nèi)的dom對象有兩種方法，感興趣的朋友可以了解下哈，希望對大家有所幫助2013-07-07
jQuery的bind的函數(shù)在實(shí)際應(yīng)用其實(shí)不是特別多，只是他可以綁定一個(gè)事件，但不會(huì)即時(shí)觸發(fā)，也可以通過unbind來解除綁定。2011-04-04
本篇文章小編為大家介紹，基于JQuery 選擇器使用說明介紹。需要的朋友參考下2013-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)全選操作案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
jquery實(shí)現(xiàn)表格行的上下移動(dòng)和置頂
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行的上下移動(dòng)和置頂，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery插件HighCharts繪制2D圓環(huán)圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D圓環(huán)圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件繪制圓環(huán)圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作
這篇文章主要為大家詳細(xì)介紹了jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作，感興趣的小伙伴們可以參考一下2015-12-12