手机验证码自动跳转下一个输入框之功能

<!-- 六个验证码输入框 -->
<div class="codeinput">
  <input type="tel" maxlength="1" id="tel1"/>
  <input type="tel" maxlength="1"/>
  <input type="tel" maxlength="1"/>
  <input type="tel" maxlength="1"/>
  <input type="tel" maxlength="1"/>
  <input type="tel" maxlength="1" id="tel6"/>
</div>
/* 验证码框样式 */
.codeinput {
    margin:0 auto;
    text-align: center; width: 87.5%; background: #000
}

.codeinput input[type=tel] {
    width: 42px;
    height:42px;
    text-align: center; border:1px solid #dad6da; border-radius: 3px; float: left; margin-left: 1%; font-size: 15px; box-sizing: border-box;
}
/* input 获取焦点边框颜色 */
   
.codeinput input[type=tel]:focus{
    outline:none;
    border:1px solid #5ec2d2;
} 
 // 每个输入框只能输入一位 输入完成自动聚焦下一输入框
    // 当输入长度等于6时,输入框失去焦点,自动提交数据,弹出提示框
    $('#tel1').focus(function(){
        //第一个input框获得焦点时触发的事件
        var txts = $(".codeinput input");
        for (var i = 0; i < txts.length; i++) {
            var t = txts[i];
            t.index = i;
            t.setAttribute("readonly", true);
            t.onkeyup = function() {
                this.value = this.value.replace(/^(.).*$/, '$1');
                var next = this.index + 1;
                if (next > txts.length - 1) return;
                txts[next].removeAttribute("readonly");
                if (this.value) {
                    txts[next].focus();
                }
            }
        }
        txts[0].removeAttribute("readonly");
    });

    // 第6个input框键盘弹起事件监听
    $('#tel6').keyup(function(){
        var mobile=$('#mobile').val();//手机号
        var codestr='';//验证码
        var txts = $(".codeinput input");
        for (var i = 0; i < txts.length; i++) {
            codestr+=txts[i].value;
        }
        if(!mobile){
            layer.msg('手机号不能为空!');
            return false;
        }
        if(!/^([1-9])\d{10}$/.test(mobile)){
            layer.msg('请输入正确的手机号!');
            return;
        }
        var codestr='';//验证码
        var txts = $(".codeinput input");
        for (var i = 0; i < txts.length; i++) {
            codestr+=txts[i].value;
        }
        if(!codestr){
            layer.msg('验证码不能为空!');
            return;
        }
        if(codestr.length !=6){
            layer.msg('请输入完整6位验证码!');
            return;
        }
        if(!isphonecode){
            layer.msg('验证码不存在!');
            return;
        }
        //TODO:后续请求接口业务逻辑
    });   

清除所有文本框

$(".codeinput").keydown(function(event){
        if(event.keyCode==8){
            $('.codeinput input[type=tel]').val("");
            $('#tel1').focus();
        }
    });

猜你喜欢

转载自blog.csdn.net/yangmy_Shy/article/details/88787861