h5移动端用jquery实现验证码输入自动聚焦到(跳转)到下一个输入框

验证码自动聚焦下一个,效果如图所示,主要用到聚焦方法和获取下一个元素方法

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<style type="text/css">
    body{
        background-color: #E6E6FA;
    }
    .center{
        display: flex;
        width: 400px;
        height: 400px;
        margin: 0 auto;
    }
    input{
        flex: 1;
        height: 100px;
        font-size: 40px;
        text-align: center;
    }
    .now{
        width:70px;
        heigth:70px;
        border:1px #cccccc solid;
    }
    .now:focus{
        border:1px #587d18 solid;
    }   
</style>
<body>
<img src='验证码地址'>
<div class="center">
    <input type='text' name='code[]' class='now' maxlength="1"/>
    <input type='text' name='code[]' class='now' maxlength="1"/>
    <input type='text' name='code[]' class='now' maxlength="1"/>
    <input type='text' name='code[]' class='now' maxlength="1"/>
</div>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $('.now').keyup(function(){
    if($(this).index()<4) {
        $(this).next('input').focus();
    }
});
</script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/longgeaisisi/article/details/82262009
今日推荐