标签:
<!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>
/** * @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 ) // 假设是首次键入有效的数字button,则默认填充兴许的时间。 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浏览器通过样式禁用输入法的方式也没有问题)。
标签:
原文地址:http://www.cnblogs.com/gcczhongduan/p/4469676.html