Js implementation horizontal line prompts that the entered verification code disappears as the entered verification code

Recently, I encountered a page on the WeChat client that I had never encountered before. I didn't write it at the beginning, but when I wrote it on other pages, I still have to go back and study this page. At the beginning, I consulted the company's mobile R & D team to get inspiration from him and finally achieved this effect. First, I will show the effect chart to you.

 

Effect chart:

 

 

Enter verification code

 

Input complete

 

Next, we will dedicate the implementation process to everyone.

Step 1: compile HTML code

<Div class = "main-out">
<P class = "identifying-title"> enter the verification code provided by the enterprise to sign in. </p>
 
<! -- Black horizontal box -->
<Div class = "pass-box">
<Div class = "pass-line">
<Div class = "line-box"> <span class = "line-one"> </span> </div>
<Div class = "line-box"> <span class = "line-two"> </span> </div>
<Div class = "line-box"> <span class = "line-three"> </span> </div>
<Div class = "line-box"> <span class = "line-four"> </span> </div>
<Div class = "line-box"> <span class = "line-five"> </span> </div>
<Div class = "line-box"> <span class = "line-six"> </span> </div>
</Div>
 
<! -- Enter the verification code box to give an absolute location -->
<Div class = "passInput" id = "on">
<Input type = "text" class = "inputCont-one" maxlength = "1"/>
<Input type = "text" class = "inputCont-two" maxlength = "1"/>
<Input type = "text" class = "inputCont-three" maxlength = "1"/>
<Input type = "text" class = "inputCont-four" maxlength = "1"/>
<Input type = "text" class = "inputCont-five" maxlength = "1"/>
<Input type = "text" class = "inputCont-six" maxlength = "1"/>
</Div>
</Div>
</Div>

Step 2: Add a style to the code

. Identifying-title {
Width: 100%;
Margin-top: 100px;
Font-size: 14px;
Color: #333;
Text-align: center;
}
. Pass-box {
Position: relative;
Width: 240px;
Height: 40px;
Margin: 50px auto 0;
}
. Pass-line {
Margin: 0 auto;
Width: 100%;
Height: 100%;
}
. Line-box {
Float: left;
Width: 40px;
Height: 40px;
}
. Line {
Display: block;
Width: 25px;
Height: 3px;
Margin: 18px auto 0;
Background: #000;
}
. PassInput {
Position: absolute;
Width: 240px;
Height: 40px;
Left: 0;
Top: 0;
}
. InputCont {
Float: left;
Width: 25px;
Height: 40px;
Margin: 0 7.5px;
Z-index: 2;
Font-size: 30px;
Color: #333;
Line-height: 40px;
Text-align: center;
Background: none;
}

Step 3: compile js code

 

<Script type = "text/javascript" src = "js/jquery-2.1.4.min.js"> </script>
<Script>
$ (Function (){
 
// Only one digit and a number can be entered in the control input box.
$ (". InputCont-one"). focus ();
$ (". Line-one"). hide ()
Onload = function (){
Var txts = on. getElementsByTagName ("input ");
For (var I = 0; I <txts. length; I ++ ){
Var t = txts [I];
T. index = I;
T. setAttribute ("readonly", true );
T. onkeyup = function (){
If (this. value = this. value. replace (/\ D/g ,'')){
Var next = this. index + 1;
If (next> txts. length-1) return;
Txts [next]. removeAttribute ("readonly ");
Txts [next]. focus ();
} Else {
$ (This). focus ();
}
}
}
Txts [0]. removeAttribute ("readonly ");
}
 
// The horizontal line disappears when the input box gets the focus.
$ (". InputCont-one"). focus (function (){
$ (". Line-one"). hide ()
})
$ (". InputCont-two"). focus (function (){
$ (". Line-two"). hide ()
})
$ (". InputCont-three"). focus (function (){
$ (". Line-three"). hide ()
})
$ (". InputCont-four"). focus (function (){
$ (". Line-four"). hide ()
})
$ (". InputCont-six"). focus (function (){
$ (". Line-six"). hide ()
})
$ (". InputCont-five"). focus (function (){
$ (". Line-five"). hide ()
})
})
</Script>
Isn't that amazing? You can practice it in my own way.