Implementation of horizontal line hint based on JS input verification code with the Verification code input disappears (JS Verification code implementation) _javascript skills

The recently made micro-letterhead page encountered a page that had not been encountered before, just started to put in there did not write, but when the other pages are written well, still have to go back to study the page problem, just at the beginning I consulted the company's mobile research and development, from his inspiration, finally achieved this effect, Let's show you the effect chart first.

Effect Chart:

Input Verification Code

Paste Picture Input Complete

The following is the implementation process dedicated to everyone

The first step: writing HTML code

<div class= "Main-out" > <p class= "identifying-title" > enter the authentication code provided by the enterprise to complete the check-in </p> <!--black Horizontal frame--> < Div class= "Pass-box" > <div class= "pass-line" > <div class= "line-box" ><span class= "line Line-one" >
</span></div> <div class= "Line-box" ><span class= "line Line-two" ></span></div> <div class= "Line-box" ><span class= "line Line-three" ></span></div> <div class= "Line-box" ><span class= ' line Line-four ' ></span></div> <div class= ' line-box ' ><span class= ' line Line-five "></span></div> <div class=" Line-box "><span class=" line Line-six "></span ></div> </div> <!--input verification code box gives an absolute positioning--> <div class= "Passinput" id= "on" > <input type= "Text" class= "Inputcont inputcont-one" maxlength= "1"/> <input type= "text" class= "Inputcont inputcont-two" maxlength= "1 "/> <input type=" text "class=" Inputcont inputcont-three "maxlength=" 1 "/&GT <input type= "text" class= "Inputcont inputcont-four" maxlength= "1"/> <input type= "text" class= "InputCont Inputcont-five "maxlength=" 1 "/> <input type=" text "class=" Inputcont inputcont-six "maxlength=" 1 "/> </div > </div> </div>

Step two: Add style to 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 three: Write JS code

<script type= "Text/javascript" src= "Js/jquery-2.1.4.min.js" ></script> <script> $ (function () {//
The control input box can be entered only one and is a number $ (". 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.replac E (/\d/g, ')) {var next = This.index + 1; if (Next > Txts.length-1) return; Txts[next].removeattribute ("ReadOnly"); TX
Ts[next].focus ();
}else{$ (this). focus ();}
} txts[0].removeattribute ("ReadOnly"); //The input box gets focus when the trailing horizontal line disappears $ (". Inputcont-one"). Focusing (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> 

The above is a small series to introduce the implementation of a horizontal line based on JS input verification code with the Verification code input disappear (JS verification code to achieve), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!