耗时输入框

最新推荐文章于 2024-12-05 13:47:29 发布

原创最新推荐文章于 2024-12-05 13:47:29 发布 · 946 阅读

0 ·

CC 4.0 BY-SA版权

解决方案专栏收录该内容

16 篇文章

订阅专栏

前言：

在系统中有输入耗时的需求，用于描述一个活动花费多少时间。

具体要求：

精确到分钟，只允许录入小时和分钟，不允许输入不合法的字符，或者做相应的校验。

设计：

根据需求考虑使用js的键盘时间来进行控制，静止非数字以外的字符录入至输入框中，这样就需要校验了。

实现代码（支持ie及chrome）

页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title></title>
	</head>
	<script language="JavaScript" type="text/javascript" src="jquery-1.3.1.min.js"></script>
	<!--inputTime.js 用到 jquery-position.js 组件-->
	<script language="JavaScript" type="text/javascript" src="inputTime.js"></script>
	<script language="JavaScript" type="text/javascript">
		$(document).ready(function(){
			bindInputTimeEvent('txt1')
			bindInputTimeEvent('txt2')
			bindInputTimeEventByClass('cls1')
		})
	</script>
	<body>
		测试耗时输入框(最大小时数:99	 最大分钟数:59) <br><br>
		耗时-绑定id：<input id='txt1' type="text"  value="" maxlength=5 style="ime-mode:disabled"/>
		耗时-绑定class：<input class='cls1' type="text"  value="" maxlength=5 style="ime-mode:disabled"/>
		耗时-99小时模式(input中新建timeTpye='99')：<input class='cls1' type="text"  value="" maxlength=5 timeTpye='99'/>
	</body>
</html>

inputTime.js

/**
 * @author 全冠清(获得当前的输入框位置)
 */
$.fn.extend({
	position:function( value ){
		var elem = this[0];
			if (elem&&(elem.tagName=="TEXTAREA"||elem.type.toLowerCase()=="text")) {
			   if($.browser.msie){
					   var rng;
					   if(elem.tagName == "TEXTAREA"){ 
						    rng = event.srcElement.createTextRange();
						    rng.moveToPoint(event.x,event.y);
					   }else{ 
					    	rng = document.selection.createRange();
					   }
					   if( value === undefined ){
					   	 rng.moveStart("character",-event.srcElement.value.length);
					     return  rng.text.length;
					   }else if(typeof value === "number" ){
					   	 var index=this.position();
						 index>value?( rng.moveEnd("character",value-index)):(rng.moveStart("character",value-index))
						 rng.select();
					   }
				}else{
					if( value === undefined ){
					   	 return elem.selectionStart;
					   }else if(typeof value === "number" ){
					   	 elem.selectionEnd = value;
       			         elem.selectionStart = value;
					   }
				}
			}else{
				if( value === undefined )
				   return undefined;
			}
	}
})



/**
 * @author yzp
 */
// 绑定输入框事件 通过id
function bindInputTimeEvent(textid){
	$('#'+textid).click(inputTimeClick)
	$('#'+textid).keydown(inputTimeKeydown)
	$('#'+textid).keyup(inputTimeKeyup)
}

/**
 * @author yzp
 */
// 绑定输入框事件 通过class
function bindInputTimeEventByClass(textid){
	$('.'+textid).click(inputTimeClick)
	$('.'+textid).keydown(inputTimeKeydown)
	$('.'+textid).keyup(inputTimeKeyup)
}


// 点击输入框则回到第一个位置
function inputTimeClick(){
	$(this).position(0);
	// alert($(this).val());
}
/* 
*	按键的首个触发事件，此时的value 还是输入之前的
*  在keydown方法中 如果返回false 输入字符则不在文本框中显示
*/
function inputTimeKeydown(e){
	//alert(event.keyCode);
	//alert($(this).val());
	// 字符超过5个就不能输入
	var inputValue = $(this).val();
	
	
	if(inputValue.length>5){
		return false;
	}


	// 进行字符处理，自动更新时间
	if ((e.keyCode>=48 && event.keyCode<=57) || (e.keyCode>=96 && event.keyCode<=105)){ //数字键不禁用
		var inputValue = $(this).val();
		var pos = $(this).position()
		var fontStr 
		var tailStr
		
		// 如果是全时间模式（非24小时）
		if($(this).attr('timeTpye')=='99'){
			
		}else{ //24小时模式
			// 限制最大小时为23小时
			if(pos==0){
				if( (e.keyCode>=51 && e.keyCode<=57) || (e.keyCode>=99 && event.keyCode<=105)){
					return false;
				}
				// （修复第二遍输入时只输入第一位导致的bug）
				inputValue = "00:00";
// 				alert("xx");
			}
			if(pos==1){
				fontStr = inputValue.substring(0,pos);
				//alert(fontStr)
				if(fontStr==2){ //当第一位是2的时候，第二位最多是3 ，为了满足最多23点
					if( (e.keyCode>=52 && e.keyCode<=57) || (e.keyCode>=100 && event.keyCode<=105)){
						return false;
					}
				}
				
			}
		}
		if(pos==2){
			
			fontStr = inputValue.substring(0,pos)+":";
			pos ++;
			tailStr = inputValue.substring(pos+1,6);
			
		}else{
			fontStr = inputValue.substring(0,pos);
			tailStr = inputValue.substring(pos+1,6);
		}
		// 限制最大分钟为59分钟
		if(pos==3){
			if( (e.keyCode>=54 && e.keyCode<=57) || (e.keyCode>=102 && event.keyCode<=105)){
				return false;
			}
		}
		// alert($(this).val());

		$(this).val(fontStr + tailStr);
		// alert("pos:"  + pos+ "fontStr:"+fontStr + " tailStr" +tailStr )
		// 如果是首次键入有效的数字按钮，则默认填充后续的时间。
		if($(this).val().length==0){
			$(this).val($(this).val()+"0:00");
		}
		$(this).position(pos);

		if($(this).position()==5){
			$(this).position(0);
		}
		

	} else if((e.keyCode>=37 && event.keyCode<40) || event.keyCode==9){ //方向键不禁用
	
	}else{ //其它键禁用
		return false;
	}
}

/* 
*	按键的第三个触发事件，此时的value是输入之后的
*	
*/
function inputTimeKeyup(e){
	if($(this).position()==5){ 
		//$(this).position(0);
	}
}

备注：

此应用在某些输入法的中文状态无法输入（如谷歌输入法），需要切换至英文（但是ie浏览器通过样式禁用输入法的方式也没有问题）。