Time-consuming input box

Preface:There is a time-consuming requirement in the system to describe how long it takes to describe an activity.Detailed Requirements:Accurate to minute, only agreed to enter hours and minutes, do not agree to input illegal characters, or do the corresponding check.Design:According to the requirements of the use of JS keyboard time to control, smart non-numeric characters entered into the input box, so it needs to be verified.


Implementation code (IE and chrome supported) page

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >


Inputtime.js
/** * @author Quanguanqing (Gets the current input box position) */$.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 *///bound input box event via Idfunction bindinputtimeevent (Textid) {$ (' # ' +textID). Click (Inputtimeclick) $ (' # ' +textid). KeyDown (Inputtimekeydown) $ (' # ' +textid). KeyUp (Inputtimekeyup)}/** * @ Author Yzp *///bound input box event via Classfunction bindinputtimeeventbyclass (Textid) {$ ('. ') +textid). Click (Inputtimeclick) $ ('. ') +textid). KeyDown (Inputtimekeydown) $ ('. ' +textid). KeyUp (Inputtimekeyup)}//Click on the input box to return to the first position function Inputtimeclick () {$ (this). Position (0);//alert ($ (this). val ());} /* The first trigger event of the key, at which value or before input * in the KeyDown method assumes that the return false input character is not displayed in the text box */function Inputtimekeydown (e) {//alert ( Event.keycode); ($ (this). Val ());///characters more than 5 cannot enter var Inputvalue = $ (this). Val (); if (inputvalue.length>5) { return false;} Do character processing and update your own time if (e.keycode>=48 && event.keycode<=57) | | (e.keycode>=96 && event.keycode<=105)) {//numeric key cannot disable var Inputvalue = $ (this). Val (); var pos = $ (this). Position () Var fontstr var tailstr//is assumed to be the full-time mode (not 24 hours) if ($ (this). attr (' timetpye ') = = ' full ') {}else{//24 hour mode//limit maximum hours for 23 hours if (pos==0) {if (e.keycode>=51 && e.keycode<=57) | | (E.keycode>=99 &&Amp event.keycode<=105)) {return false;} (Fix the bug that the first bit caused by typing the second time) Inputvalue = "00:00";//Alert ("XX");} if (pos==1) {fontstr = inputvalue.substring (0,pos);//alert (FONTSTR) if (fontstr==2) {///when the first bit is 2, the second bit is up to 3, in order to satisfy up to 23 points if ( (e.keycode>=52 && e.keycode<=57) | | (e.keycode>=100 && event.keycode<=105)) {return false;}}}} if (pos==2) {fontstr = inputvalue.substring (0,pos) + ":";p os ++;tailstr = inputvalue.substring (pos+1,6);} Else{fontstr = inputvalue.substring (0,pos); tailstr = inputvalue.substring (pos+1,6);} Limit maximum minutes to 59 minutes 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)/ /Assuming that a valid number button is typed for the first time, the default padding may be. if ($ (this). Val (). length==0) {$ (The). Val ($ (this). Val () + "0:00");} $ (this). Position (POS), if ($ (this). Position () ==5) {$ (this). Position (0);} else if (e.keycode>=37 &&EVENT.KEYCODE&LT;40) | | EVENT.KEYCODE==9) {//arrow key cannot disable return false with}else{//other key;}} /* * The third trigger event of the key, at which value is the input **/function Inputtimekeyup (e) {if ($ (this). Position () ==5) {//$ (this). Position (0);}


Note:
This app can not be entered in the Chinese state of some input methods (such as Google Input method), you need to switch to English (but the way ie disabled the input method through the style is not a problem).
Time-consuming input box