JavaScript Imitation payment treasure password input box _javascript tips

Now a lot of time people pay the scene is on the phone, and as the H5 page development becomes more and more convenient, many scenes also moved from the client to the browser, where the payment of the scene is naturally placed in the browser. Then this type of input box you must not be unfamiliar with it:

So today I use JavaScript code to achieve this effect, then first introduce the whole idea, first we will determine the number of input password, my demand is 5 bits, then use a div tag to wrap 5 input tags.

and set the Display:inline-block property for this 5 input, and use <!--> to eliminate the direct margin value of the element, then the HTML is the following:

<div class= "Input" > 
<input type= "Tel" placeholder= "with" maxlength= "" ><!--><input type= 
" Tel "placeholder=" machine "maxlength=" "><!- 
-><input type=" tel "placeholder=" "maxlength=" "><!-" 
-><input type= "tel" placeholder= "bit" maxlength= "><!--><input type= 
" Tel "placeholder=" number " Maxlength= "" > 

In the code we need to set up the number of digits to enter, otherwise it is not like it ~ of course, in order to move the end of the input can arouse the numeric keypad, we also need to set type= "Tel." Then the next is the CSS style code, here I simply posted some code, the specific high imitation of the image is actually here ~

input { 
display:inline-block; 
&:last-child { 
border-right:px solid #; 
} 
Input { 
border-top:px solid #; 
BORDER-BOTTOM:PX solid #; 
BORDER-LEFT:PX solid #; 
width:px; 
height:px; 
Outline:none; 
Font-family:inherit; 
font-size:px; 
Font-weight:inherit; 
Text-align:center; 
line-height:px; 
Color: #ccc; 
Background:rgba (,,,); 
} 

So the next step is the key JavaScript section,

/** * Analog Alipay Password Input form * * (function (window, document) {var active =, inputbtn = Document.queryselectorall (' input '); for (var i =; i < inputbtn.length; i++) {Inputbtn[i].addeventlistener (' click ', Function () {Inputbtn[active].focus 
(); 
}, False); 
Inputbtn[i].addeventlistener (' Focus ', function () {This.addeventlistener (' KeyUp ', Listenkeyup, false); 
}, False); 
Inputbtn[i].addeventlistener (' Blur ', function () {This.removeeventlistener (' KeyUp ', Listenkeyup, false); 
}, False); 
/** * Tapping Event on the keyboard * * Function Listenkeyup () {var beginbtn = document.queryselector (' #beginBtn '); 
if (!isnan (this.value) && this.value.length!=) {if (Active <) {active = =; 
} inputbtn[active].focus (); 
else if (this.value.length = =) {if (Active >) {active =; 
} inputbtn[active].focus (); 
} if (active >=) {var _value = Inputbtn[active].value; if (Beginbtn.classname = = ' Begin-no ' &&!isnan (_value) && _value.length!=) {Beginbtn.classname = ' begin '; 
Beginbtn.addeventlistener (' click ', Function () {calculate.begin (); 
}, False); 
} else {if (beginbtn.classname = ' begin ') {beginbtn.classname = ' begin-no ';  }}) (window, document);

First of all, we listen to the outermost div, when the user select Div will be the focus of input to the active above, and this active is a counter, the default is the first, that is 0, And when we enter the correct number, we will add an active so the input focus will be moved backwards, so that the completion of the input to move a bit backward function, and at the same time we monitor the keyboard backspace, when the user clicked the BACKSPACE key after the active minus one, So the focus of the input box moves forward, of course, when input loses focus, we also remove the listening event that is bound to it, so that it does not cause multiple triggering problems.

In fact, this kind of comb down will find the whole effect is very simple, just want to control a focus of the movement is good, and I think the whole component of the focus is still in the CSS style imitation above ~ after all, JavaScript logic is not difficult ~ finally wish you Happy New Year ~ ~ (*^__^*) ~ ~

The above code gives us a brief description of the JavaScript imitation alipay password input box, I hope you like.