多个input输入框限制每个输入框输入一位输入完成自动获取下一个input焦点

最新推荐文章于 2024-02-23 15:00:05 发布

姜腾腾

最新推荐文章于 2024-02-23 15:00:05 发布

阅读量9.2k

点赞数 2

分类专栏：经验总结记录

本文链接：https://blog.csdn.net/jw137323668/article/details/77453542

版权

经验总结记录专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>多个input自动获取下一个input焦点</title>
    <style>
    #wrap {
        margin: 50px auto;
        width: 300px;
        text-align: center;
    }

    #wrap div{
        width: 206px;
        margin: 10px auto;
    }

    #wrap div input[type=text] {
        width: 30px;
        height: 20px;
        float: left;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="wrap">
        <div>
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
        </div>
        <div>
            <p>每个输入框只能输入一位 输入完成自动聚焦下一输入框</p>
        </div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        var txts = $("#wrap 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");
                txts[next].focus();
            }
        }
        txts[0].removeAttribute("readonly");
    });
    </script>
</body>

</html>

姜腾腾

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
多个input输入框限制每个输入框输入一位输入完成自动获取下一个input焦点

多个input自动获取下一个input焦点 #wrap { margin: 50px auto; width: 300px; text-align: center; } #wrap div{ width: 206px; margin: 10px auto; } #w
复制链接

扫一扫