前端页面input输入完成后切换input源码

最新推荐文章于 2021-05-30 19:21:04 发布

aoya1979

最新推荐文章于 2021-05-30 19:21:04 发布

阅读量172

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/heisenberg_zhe/p/6694384.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="5" id="sn1"> - <!-
    -><input type="tel" placeholder="包" name="sn2" maxlength="5" id="sn2"> - <!-
    -><input type="tel" placeholder="密" name="sn3" maxlength="5" id="sn3"> - <!-
    -><input type="tel" placeholder="钥" name="sn4" maxlength="5" 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 === 5){
                  var str = that.val();
                  var patt = /\d+/g;
                  var result = str.match(patt);
                  var value = result?result.join(''):'';
                  if (value.length < 5) {
                      that.val(value);
                  } else if(that.next()) {
                      that.next().focus();
                  }
                }

            })
        });
    });
</script>
</html>