找回密码
当前位置：前端开发者 > HTML > 正文

前端开发input框 输完直接跳到下一个

2018-08-01 23:29:34 分类：HTML 阅读(751) 评论(0)

前端网页开发如何自学|前端开发的编辑器|前端组件化开发2018

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>html的input输完一个直接跳到下一个</title>
    <style>
        .input input {
            display: inline-block;
        }
        .input {
            width: 580px;
            height: 41px;
            line-height: 41px;
            margin-right: 20px;
        }
        .input input {
            border: 1px solid #ccc;
            width: 100px;
            height: 40px;
            outline: none;
            font-size: 14px;
            font-weight: inherit;
            text-align: center;
            line-height: 40px;
            color: #000;
            background: #fff;
            margin-right: 10px;
            margin-left: 10px;
            font-family: “microsoft yahei”;
        }
        .input:first-child {
            margin-left: 0;
        }
    </style>
</head>
<body>
    <div class=”input” id=”coupon”>
        <input type=”tel” placeholder=”红” name=”sn1″ maxlength=”3″ id=”sn1″> –
        <!-
->
        <input type=”tel” placeholder=”包” name=”sn2″ maxlength=”3″ id=”sn2″> –
        <!-
->
        <input type=”tel” placeholder=”密” name=”sn3″ maxlength=”3″ id=”sn3″> –
        <!-
->
        <input type=”tel” placeholder=”钥” name=”sn4″ maxlength=”3″ id=”sn4″>
    </div>
</body>
<script src=”http://www.lanrenzhijia.com/ajaxjs/jquery.min.js”></script>
<script>
    $(document).ready(function () {
        $(“#sn1”).focus();
        //自动跳到下一个输入框
        $(“input[name^=’sn’]”).each(function () {
            var that = $(this);
            that.keyup(function () {
                if (that.val().length === 3) {
                    if (that.val().trim().length < 3) {
                        var TheVal = that.val().trim();
                        that.val(TheVal)
                    } else if (that.next()) {
                        that.next().focus();
                    }
                }
            })
        });
    });
</script>
</html>

评论中有提到中间留空的问题，我觉得不是很有必要，两边留白看不见，影响用户体验，中间却不会。
不过还是做了一个，不管输入什么，只保留数字，其他字母空格都没发输入。
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>html的input输完一个直接跳到下一个</title>
    <style>
        .input input {
            display: inline-block;
        }
        .input {
            width: 580px;
            height: 41px;
            line-height: 41px;
            margin-right: 20px;
        }
        .input input {
            border: 1px solid #ccc;
            width: 100px;
            height: 40px;
            outline: none;
            font-size: 14px;
            font-weight: inherit;
            text-align: center;
            line-height: 40px;
            color: #000;
            background: #fff;
            margin-right: 10px;
            margin-left: 10px;
            font-family: “microsoft yahei”;
        }
        .input:first-child {
            margin-left: 0;
        }
    </style>
</head>
<body>
    <div class=”input” id=”coupon”>
        <input type=”tel” placeholder=”红” name=”sn1″ maxlength=”3″ id=”sn1″> –
        <!-
->
        <input type=”tel” placeholder=”包” name=”sn2″ maxlength=”3″ id=”sn2″> –
        <!-
->
        <input type=”tel” placeholder=”密” name=”sn3″ maxlength=”3″ id=”sn3″> –
        <!-
->
        <input type=”tel” placeholder=”钥” name=”sn4″ maxlength=”3″ id=”sn4″>
    </div>
</body>
<script src=”http://www.lanrenzhijia.com/ajaxjs/jquery.min.js”></script>
<script>
    $(document).ready(function () {
        $(“#sn1”).focus();
        //自动跳到下一个输入框
        $(“input[name^=’sn’]”).each(function () {
            var that = $(this);
            that.keypress(function (e) {
                var target = e.target;
                var charCode = e.charCode;
                if (!/\d/.test(String.fromCharCode(charCode))) {
                    e.preventDefault()
                }
            })
            that.keyup(function () {
                if (that.val().length === 3) {
                    var str = that.val();
                    var patt = /\d+/g;
                    var result = str.match(patt);
                    var value = result ? result.join(”) : ”;
                    if (value.length < 3) {
                        that.val(value);
                    } else if (that.next()) {
                        that.next().focus();
                    }
                }
            })
        });
    });
</script>
</html>

前端开发 显卡要求|web前端开发规范 实现符合w3c的web标准|埃森哲前端开发笔试题

» 本文来自：前端开发者 » 《前端开发input框 输完直接跳到下一个》
» 本文链接地址：https://www.rokub.com/4965.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论