jQuery输入时间日期自动格式化效果
分类：实例代码
如果在文本框输入时间日期的时候，能够自动进行格式化处理。那么对于用户来说人性化程度会得到极大的提高，下面就是一个能够实现此功能的代码示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
var inputs = $(".hhm-dateInputer");
var dateStr = "____-__-__";
inputs.each(function(index,elem){
var input = $(this);
input.on("keydown",function(event){
var that = this; //当前触发事件的输入框。
var key = event.keyCode;
var cursorIndex = getCursor(that);
//输入数字
if(key >= 48 && key <= 57){
//光标在日期末尾或光标的下一个字符是"-",返回false,阻止字符显示。
if(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;}
//字符串中无下划线时，返回false
if(that.value.search(/_/) === -1){return false;}
var fron = that.value.substring(0,cursorIndex); //光标之前的文本
var reg = /(\d)_/;
setTimeout(function(){ //setTimeout后字符已经输入到文本中
//光标之后的文本
var end = that.value.substring(cursorIndex,that.value.length);
//去掉新插入数字后面的下划线_
that.value = fron + end.replace(reg,"$1");
//寻找合适的位置插入光标。
resetCursor(that);
},1);
return true;
//"Backspace" 删除键
}else if( key == 8){
//光标在最前面时不能删除。 但是考虑全部文本被选中下的删除情况
if(!cursorIndex && !getSelection(that).length){ return false;}
//删除时遇到中划线的处理
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(){
//值为空时重置
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 = "";
}
});
});
//设置光标到正确的位置
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);
//把光标放到第一个_下划线的前面
//没找到下划线就放到末尾
}
});
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); //左边界移动到起点
range.move("character",index); //光标放到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); //光标移到0位置。
//这里一定是先moveEnd再moveStart
//因为如果设置了左边界大于了右边界，那么浏览器会自动让右边界等于左边界。
range.moveEnd("character",rightIndex);
range.moveStart("character",leftIndex);
range.select();
}
}
</script>
<body>
<input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="请输入日期">
</body>
</html>