前端编写ip地址输入框

项目需要临时写的，没有用到兼容性方面的知识，代码已整理好，可直接运行看效果。本人小白一枚，有不足的地方请指正
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js编写ip输入框</title>
    <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css"></link> -->
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <style>
  .ip-input{
     
     
      width:5%;
      border:none;
      outline:none;
      text-align:right;
  }
  .ip-addr{
     
     
    border: 1px solid #ccc;
    display: inline;
    padding: 8px;
  }
  .align-cent{
     
     
      padding-top:0!important;
  }
  .add-style{
     
     
      margin-top:50px;
  }
    </style>
</head>
<body>
    <form class="form form-horizontal add-style">
        <div class="form-group col-md-6">
            <label class="col-md-6 control-label align-cent">IP地址:</label>
            <div class="form-control ip-addr" id="ipAddr">
                <input type="text" id="ipAddr1" name="ipAddr1" onkeyup="filterIllegalInput('ipAddr1')" class="ip-input" autocomplete="off">.
                <input type="text" id="ipAddr2" name="ipAddr2" onkeyup="filterIllegalInput('ipAddr2')" class="ip-input" autocomplete="off">.
                <input type="text" id="ipAddr3" name="ipAddr3" onkeyup="filterIllegalInput('ipAddr3')" class="ip-input" autocomplete="off">.
                <input type="text" id="ipAddr4" name="ipAddr4" onkeyup="filterIllegalInput('ipAddr4')" class="ip-input" autocomplete="off">
            </div>
        </div>
    </form>
</body>
<script>
    let ipTypeRegexp = /^([0-9]|1[0-9]{1,2}|2[0-5]{2})$/
    let errorRegexp = /^0\d$/
    function filterIllegalInput(val){
     
     
        //内容过滤
        $("#"+val).val($("#"+val).val().replace(/[^0-9]/ig,""))//过滤非数字输入
        if(!ipTypeRegexp.test($("#"+val).val())){
     
     //校验不通过：0开头，向上取整255
            if(errorRegexp.test($("#"+val).val())){
     
     //0开头输入
                $("#"+val).val($("#"+val).val().substr(1))
            }
            if(parseInt($("#"+val).val())>255){
     
     //大于255相当于输入255
                $("#"+val).val("255")
            }
        }
        //自动换框
        if($("#"+val).val().length==3){
     
     //当前输入框3位满了以后光标自动跳到下一个输入框
                let nextInput = parseInt(val.charAt(val.length-1))+1
                if(nextInput!=5){
     
     //最后一格满了以后不会继续往后跳
                    let nextItem = val.replace(/\d/ig,nextInput)
                    $("#"+nextItem).focus()
                }
        }
        if($("#"+val).val().length==0){
     
     //当前输入框无内容时光标自动跳到上一个输入框
            let lastInput = parseInt(val.charAt(val.length-1))-1
            if(lastInput!=0){
     
     //第一格无内容以后不会继续往前跳
                let lastItem = val.replace(/\d/ig,lastInput)
                $("#"+lastItem).focus()
            }
        }
}
</script>
</html>
前端编写ip地址输入框

前端编写ip地址输入框

猜你喜欢
