There is a need for time consumption input in the system, which is used to describe the time consumed by an activity. Specific requirements: accurate to minutes, only hours and minutes are allowed, illegal characters are not allowed, or the corresponding verification is performed. DESIGN: Use the JS keyboard time for control as needed, and enter non-numeric characters at rest into the input box. This requires verification.
Implementation Code (supporting IE and chrome) Page
<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>
Inputtime. js
/*** @ Author full crown clear */$. 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. SRC Element. 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 * // bind the input box event function bindinputtimeevent (textid) {$ ('#' + textid ). click (inputtimeclick) $ ('#' + textid ). keydown (inputtimekeydown) $ ('#' + textid ). keyup (inputtimekeyup)} // click the input box to return to the first position function inputtimeclick () {$ (this ). position (0);}/** the first trigger event of the key, at this time, the value is still input * in the keydown method. If false is returned, the input character is not displayed in the text box */function inputtimekeydown (e) {// alert (event. keycode); // alert ($ (this ). val (); // if there are more than five characters, you cannot enter var inputvalue = $ (this ). val (); If (inputvalue. length> 5) {return false;} // process the characters and automatically update the time if (E. keycode> = 48 & event. keycode <= 57) | (E. keycode> = 96 & event. keycode <= 105) {// The number key does not disable var inputvalue =$ (this ). val (); var Pos = $ (this ). position () var fontstr var tailstrif (Pos = 2) {fontstr = inputvalue. substring (0, POS) + ":"; POS ++; tailstr = inputvalue. substring (Pos + 1, 6);} else {fontstr = inputvalue. substring (0, POS); tailstr = inputvalue. substring (Pos +);} If (Pos = 3) {If (E. keycode> = 54 & E. keycode <= 57) | (E. keycode & gt; = 102 & event. keycode <= 105) {return false ;}$ (this ). val (fontstr + tailstr); // alert ("POS:" + POS + "fontstr:" + fontstr + "tailstr" + tailstr) $ (this ). position (POS); if ($ (this ). position () = 5) {$ (this ). position (0) ;}} else if (E. keycode> = 37 & event. keycode <40) | event. keycode = 9) {//} else {// other keys disable return false;}/** the third trigger event of the key, at this time, the value is the input **/function inputtimekeyup (e) {if ($ (this ). position () = 5) {$ (this ). position (0 );}}
Time consumption input box