JavaScript实现横线提示输入验证码随输入验证码输入消失的方法

最近做微信端的页面遇到了一个之前没有遇到过的一个页面，刚开始放在那没有去写，可是等其他页面都写好的时候，还是得回过头来研究这个页面问题，刚开始我请教了公司的移动研发，从他那里得到启发，最终实现了这个效果，先把效果图展示出来给大家看看

效果图：

输入验证码

输入完毕

下面就把实现过程奉献给大家

第一步：编写超文本标记语言代码

div class=' main-out ' p class=' identificati-title '输入企业提供的验证码，即可完成签到/p！-黑色横线框-div class=' pass-box ' div class=' pass-line ' div class=' line-box ' span class=' line-one '/span/div class=' line-box ' span class=' line-line-two '/span/div class=' line-box ' span class=' line-line-四'/span/div class=' line-box ' span class=' line-line-line-五'/span/div class=' line-输入验证码框给一个绝对定位-div class=' passInput ' id=' on '输入类型=' text ' class=' input ont input ont-one ' maxlength=' 1 '/input type=' text ' class=' input ont input ont-two ' maxlength=' 1 '/input type=' text ' class=' input ont第二步：给代码添加样式。识别-标题{宽度： 100%;边距-top : 100 px；font-size : 14px颜色： # 333文本对齐：中心；}.传递盒{位置：相对；宽度： 240像素；高度： 40px余量： 50px自动0;}.通过线{ margin:0 auto宽度：100%;高度：100%;}.线盒{左侧浮动：宽度： 40px高度： 40px}.第{显示：行块；宽度： 25px高度height:3pxmargin:18px自动0;背景技术： # 000;}.passInput {位置：绝对值；宽度宽度：240像素高度：40 px左： 0；top : 0；}.输入孔{左侧浮动：宽度： 25px高度：40 pxmargin :0 7.5 pxz-index : 2；font-size :30 px颜色： # 333线高： 40px文本对齐：中心；背景：无；}第三步：编写射流研究…代码

脚本类型=' text/JAVAScript ' src=' http : js/jquery-2。1 .4 .量滴js//script script $(function(){//控制输入框只能输入一位并且是数字$('.输入一个')。焦点();$('.第一行')。hide()onload=function(){ var txts=on。getelementsbytagname(' input ')；for(var I=0；itxts . lengthi){ var t=txt[I]；指数=1；t.setAttribute('readonly '，true)；t . onkeyup=function(){ if(this。值=这个。价值。替换(/\ D/g ' '){ var next=this。指数1；if(下一个txts.length - 1)返回；txts[下一步]。移除属性(“只读”)；txts[下一步]。焦点();}else{$(this).焦点();} } } txt[0].移除属性(“只读”)；}//输入框获得焦点的时候后面的横线消失$('.输入一个')。focus(function(){$(')).第一行')。hide()})$(' .输入ont-two ').focus(function(){$(')).第二行')。hide()})$(' .输入ont-三')。focus(function(){$(')).第三行')。hide()})$(' .输入ont-four ').focus(function(){$(')).第四行')。hide()})$(' .输入端-六' .focus(function(){$(')).第六行')。hide()})$(' .输入ont-五')。focus(function(){$(')).第五行')。hide()})})/script以上所述是小编给大家介绍的Java脚本语言实现横线提示输入验证码随输入验证码输入消失的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！