默認光標在第一個input框裏面,第一個輸入完光標默認到第二個input框,獲取驗證碼倒計時效果
<!-- 驗證碼彈窗開始 -->
<div class="vercodebox">
<h4>手機驗證碼</h4>
<p><em>已發送至159****4315手機號</em> <span>60s</span></p>
<h5>
<input type="text" maxlength="1"/>
<input type="text" maxlength="1"/>
<input type="text" maxlength="1"/>
<input type="text" maxlength="1"/>
</h5>
<div class="btcz">
<a class="aginbtn">重新獲取</a>
<a class="Submittn">提交</a>
</div>
</div>
<!-- 驗證碼錯誤開始 -->
//獲取驗證碼
var timer = null;
var count = 60;
$(".bannerbox .dzform .eachinput .yuyuebtn").click(function() {
setfocus();
$(".vercodebox").show();
timer = setInterval("Timer()",1000);
});
$(".vercodebox .btcz .aginbtn").click(function() {
$(".vercodebox .btcz .aginbtn").hide();
clearInterval(timer);
count = 60;
$(".vercodebox p span").text(count + 's');
timer = setInterval("Timer()",1000);
});
function Timer()
{
count--;
$(".vercodebox p span").text(count + 's');
if (count <=0) {
clearInterval(timer);
$(".vercodebox .btcz .aginbtn").show();
}
}
function setfocus(){
var vercod = $(".vercodebox h5 input");
for(var i = 0; i<vercod.length;i++){
var t = vercod[i];
t.index = i;
t.setAttribute("disabled", true);
t.onkeyup=function(){
this.value=this.value.replace(/^(.).*$/,'$1');
var next = this.index + 1;
if(next > vercod.length - 1) return;
vercod[next].removeAttribute("disabled");
vercod[next].focus();
}
}
vercod[0].removeAttribute("disabled");
setTimeout(function(){
vercod[0].focus();
},1);
}
$(".vercodebox .btcz .Submittn").on('click',function(){
var v1 = $("input:eq(1)").val();
var v2 = $("input:eq(2)").val();
var v3 = $("input:eq(3)").val();
var v4 = $("input:eq(4)").val();
var str=v1+v2+v3+v4;
alert(str);
})