JS implementation of serial number effect

Front-end friends may have encountered the need to enter a serial number on the page, or activation code (like the serial number in the PC genuine software), but the HTML does not provide us with similar components, we have to implement one ourselves:

The general idea is to have a hidden input in the form, instead of a set of input on the surface:

1 <formname=""Action=""Method= "POST">2 <P>3 <label>Please enter the Activation code:</label>4 <spanclass= "Act-code-group">5     <inputID= "Act-code-item-1"name= "Act-code-item-1"class= "Act-code-item"type= "text" /> - 6     <inputname= "Act-code-item-2"class= "Act-code-item"type= "text" /> - 7     <inputname= "Act-code-item-3"class= "Act-code-item"type= "text" /> - 8     <inputname= "Act-code-item-4"class= "Act-code-item"type= "text" />9 </span>Ten     <inputclass= "Act-code-hidden"type= "hidden"value="" /> One </P>

As for the design of the things left to everyone, their own play it!

And then we'll take care of the relevant logic:

1 functionInitactcodegroup (DOM) {2     varActcodegroup =DOM,3Actcodeitem = Actcodegroup.find ('. Act-code-item '));4     varCtrlpress =false;5     //actcodeitem.attr (' maxlength ', ' 5 ');6Actcodeitem.keyup (function(e) {7         varOldval = $ ( This). Val ();8         if(E.keycode = = 8){9             //BACKSPACETen             if(oldval.length <= 0){ One$( This). Prev (). focus (); A             } -}Else if(E.keycode = = &&ctrlpress) { -             //Ctrl + V the             varParsetxt = $ ( This). Val (), -Parsetxtlen =parsetxt.length; -  -Ctrlpress =false; +  -             varActcodes = []; +             if(Parsetxt.indexof ('-') >= 0){ AActcodes = Parsetxt.split ('-')); at}Else{ -                 if(Parsetxtlen >= 4) {Actcodes.push (parsetxt.substr (0, 4));} -                 if(Parsetxtlen >= 8) {Actcodes.push (Parsetxt.substr (4, 4));} -                 if(Parsetxtlen >= 12) {Actcodes.push (Parsetxt.substr (8, 4));} -                 if(Parsetxtlen >= 16) {Actcodes.push (Parsetxt.substr (12, 4));} -             } in  -             if(Actcodes.length > 1){ to                 varCurinput = $ ( This); +$.each (Actcodes,function(i, v) { -                     if(Curinput && v.length <= 4){ the Curinput.val (v); *Curinput =Curinput.next (); $}Else{Panax Notoginseng                         return false; -                     } the                 }); +             } A  the}Else if(E.keycode = = 17){ +SetTimeout (function(){ -Ctrlpress =false; $}, 1000); $}Else{ -             if(Oldval.length >= 4){ -$( This). Val (Oldval.substr (0,4)); the                 if($( This). Next (). length > 0){ -$( This). Next (). focus ();Wuyi                 } the             } -         } Wu}). KeyDown (function(e) { -         if(E.keycode = = 17){ AboutCtrlpress =true; $         } -     }); -}

This implements the serial number component of the 4*4, and the next call to the initialization function is good.

$ (document). Ready (function() {        Initactcodegroup ($ ('. Act-code-group ')
});

Open your browser and look at our serial number components!

JS implementation of serial number effect