Front-end writing ip address input box
The project needs to be written temporarily, no knowledge of compatibility is used, the code has been sorted out, and you can run it directly to see the effect. I'm a little white, please correct me if there are any deficiencies
<!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>