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

<!-- 六个验证码输入框 -->
<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();
        }
    });

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值