验证码框的样式怎么做成这样？输入一个字母怎么自动跳转到第二框呢？，求帮忙

Question

验证码框的样式怎么做成这样？输入一个字母怎么自动跳转到第二框呢？，求帮忙

Answer 1

用focus函数转移焦点
css:

.now{width:70px;heigth:70px;border:1px #cccccc solid;}
.now:focus{border:1px #587d18 solid;}

HTML:

<img src='验证码地址'>
<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"/>

JQ:
输入后，焦点移向下一个input元素

//引用前面老兄cevin的代码
$('.now').keyup(function(){
    if($(this).index()<4) {
        $(this).next('input').focus();
    }
});

Answer 2

你是说下面的四个框框吗？div里面嵌套四个div就好了 display 设置为inline-block

Answer 3

判断框框里面内容是否为空 如果不为空 那么下一个空格获得焦点

Answer 4

$(obj).on('keyup',function(){
    if($(this).index()<4) {
        $(this).next('input').focus();
    }
});

Answer 5

下面是一个input 然后设置letter-spacing, 上面用四个span或者div设置边框，然后设置background: transparent;就可以了吧

Answer 6

我觉得应该是这个框中输入正确然后跳到下一个框

Answer 7

谢谢邀请。参考焦点函数focus