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

悠悠 2022-05-14 02:36 156阅读 0赞

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

![这里写图片描述][70]

<!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>

[70]: /images/20220514/aa01e05b0a544bf8ba3f7e82240b76de.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关输入文本框，焦点自动跳转下一个文本框

![Center][] $(".yhjuan").keydown(function(event)\{ var num=event.keyCode;

绝地灬酷狼/ 2022年09月21日 11:38/ 0 赞/ 182 阅读

相关 h5键盘遮挡输入框

1. h5嵌入到原生时，输入框获取焦点会调起键盘，如果不作处理键盘有可能会遮挡住输入框。不引入插件前提下的解决方案大多是这两种：scrollintoviewif

刺骨的言语ヽ痛彻心扉/ 2022年06月17日 13:52/ 0 赞/ 267 阅读

相关 JS实现回车键切换到下一个输入框

进入正题之前，首先说明一下这里的情况。因为我的input输入框全部都是使用JS代码动态生成的，也就是说我在页面里面点击一次按钮就会生成几个输入框。所以我使用了JQuer

深碍√TFBOYSˉ_/ 2022年05月14日 09:13/ 0 赞/ 432 阅读

相关 h5移动端用jquery实现验证码输入自动聚焦到（跳转）到下一个输入框

验证码自动聚焦下一个，效果如图所示，主要用到聚焦方法和获取下一个元素方法 ![这里写图片描述][70] <!DOCTYPE html> <html>

悠悠/ 2022年05月14日 02:36/ 0 赞/ 157 阅读

相关 Android：EditText回车跳到下一个输入框或登录

[Android：EditText回车跳到下一个输入框或登录][Android_EditText] [Android_EditText]: https://blog.csd

﹏ヽ暗。殇╰゛Y/ 2022年02月02日 09:04/ 0 赞/ 394 阅读

相关 Android手机号码输入框（满11位自动跳到下个输入框）实例代码

view包： import android.content.Context; import android.text.Editable; import

红太狼/ 2022年02月02日 08:58/ 0 赞/ 281 阅读

相关 input输入框点击回车切换到下一个输入框功能

直接上代码： HTML： <form class="layui-form" action="../in" id="form" method="post" name=

逃离我推掉我的手/ 2022年02月01日 23:34/ 0 赞/ 988 阅读

相关输入框输入验证码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

浅浅的花香味﹌/ 2021年11月29日 15:54/ 0 赞/ 489 阅读

相关 js实现多个小方格输入验证码，一格输入完成后自动聚焦到下一格

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

骑猪看日落/ 2021年11月09日 05:48/ 0 赞/ 960 阅读

相关 h5 输入提示框

输入框提示列表 input的list属性必须和datalist的id属性相同，才能有输入提示框 datalist中的内容将会被隐藏代码示例:

缺乏、安全感/ 2021年07月24日 14:35/ 0 赞/ 466 阅读