快捷導(dǎo)航

基于JS實(shí)現(xiàn)橫線提示輸入驗(yàn)證碼隨驗(yàn)證碼輸入消失(js驗(yàn)證碼的實(shí)現(xiàn))

更新時(shí)間：2016年10月27日 09:25:19 作者：IT985博客

最近在開微信的頁(yè)面，在項(xiàng)目需求中遇到之前沒有做過(guò)的功能，要求橫線提示輸入驗(yàn)證碼隨驗(yàn)證碼輸入橫線消失，基于js怎么實(shí)現(xiàn)的呢？下面小編給大家分享基于js實(shí)現(xiàn)驗(yàn)證碼功能，感興趣的朋友一起看看吧

最近做微信端的頁(yè)面遇到了一個(gè)之前沒有遇到過(guò)的一個(gè)頁(yè)面，剛開始放在那沒有去寫，可是等其他頁(yè)面都寫好的時(shí)候，還是得回過(guò)頭來(lái)研究這個(gè)頁(yè)面問(wèn)題，剛開始我請(qǐng)教了公司的移動(dòng)研發(fā)，從他那里得到啟發(fā)，最終實(shí)現(xiàn)了這個(gè)效果，先把效果圖展示出來(lái)給大家看看

效果圖：

輸入驗(yàn)證碼

粘貼圖片輸入完畢

下面就把實(shí)現(xiàn)過(guò)程奉獻(xiàn)給大家

第一步：編寫HTML代碼

<div class="main-out">
<p class="identifying-title">輸入企業(yè)提供的驗(yàn)證碼，即可完成簽到</p>
<!--黑色橫線框-->
<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>
<!--輸入驗(yàn)證碼框給一個(gè)絕對(duì)定位-->
<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"/>
<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>

第二步：給代碼添加樣式

.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;
}

第三步：編寫js代碼

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(function(){
//控制輸入框只能輸入一位并且是數(shù)字
$(".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");
}
// 輸入框獲得焦點(diǎn)的時(shí)候后面的橫線消失
$(".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>

以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)橫線提示輸入驗(yàn)證碼隨驗(yàn)證碼輸入消失(js驗(yàn)證碼的實(shí)現(xiàn))，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: