项目需要临时写的，没有用到兼容性方面的知识，代码已整理好，可直接运行看效果。本人小白一枚，有不足的地方请指正
<!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>