HTML realizes the function code of ip input box

pseudocode:

<style>                 
.login-user {
    display: flex;
    color: #000;
    line-height: 30px;
}
.login-user input{
    height: 46px;
    border-radius: 4px;
    margin: 0px 4px;
}
</style>

<div class="layui-form-item login-user">
    <input type="text" id="ip_b_1" class="layui-input numInput" />.
    <input type="text" id="ip_b_2" class="layui-input numInput" />.
    <input type="text" id="ip_b_3" class="layui-input numInput" />.
    <input type="text" id="ip_b_4" class="layui-input numInput" />
</div>

<script>
// ip输入框的最大值
let ip_max = 255;
let FileIPL = localStorage.getItem("showIP") || "192.168.1.199";
setIpInput(FileIPL);

//设置IP端口默认值
function setIpInput(ip) {
    let newIp =  ip.split('.');
    $("#ip_b_1").val(newIp[0]);
    $("#ip_b_2").val(newIp[1]);
    $("#ip_b_3").val(newIp[2]);
    $("#ip_b_4").val(newIp[3]);
}

// 监听键盘输入事件
$(".numInput").bind("keydown", function (event) {
    let code = event.keyCode;
    // 只能输入数字键、删除键、小数点，tab键，其他的都不能输入
    if ((code < 48 && 8 != code && 37 != code && 39 != code && 9 != code) ||
        (code > 57 && code < 96) ||
        (code > 105 && 110 != code && 190 != code)) {
        return false;
    }
    // 如果输入了点，右键 (.)，则直接跳转到下一个输入框并选中值
    if (code == 110 || code == 190 || code == 39 || code == 40) {
        $(this).next().focus()
            .select();
        return false;
    }
    if (code == 37 || code == 38) {
        $(this).prev().focus()
            .select();
        return false;
    }
});
// 监听键盘离开事件
$(".numInput").bind("keyup", function (event) {
    // 判断当前输入框的值
    let code = event.keyCode;
    let value = $(this).val();
   
    // 如果输入的值大于ip最大值，则默认设置为255
    if (value != null && value != '' && parseInt(value) > ip_max) {
        $(this).val("255");
        return false;
    }
    // 如果输入框的值大于100并且按键不为上下左右点，并且符合规则，则跳转到下一个输入框并选中值
    if ((code !== 9 && code !== 110 && code !== 190 && code !== 39 && code !== 37 && code !== 38 && code !== 40) && value != null && value != '' && parseInt(value) >= 100 && parseInt(value) <= ip_max) {
        $(this).next().focus()
            .select();
        return false;
    }
    // 判断是否是0开头的不规范数字
    if (value != null && value != '' && parseInt(value) != 0) {
        // 如果当前输入的是0开头，则把0去掉,方法是直接转数字即可
        value = parseInt(value);
        if (isNaN(value)) {
            $(this).val("");
        } else {
            $(this).val("" + value);
        }
    }
});

// 失去焦点事件
$(".numInput").bind("blur", function () {
    let value = $(this).val();
    // 如果失去焦点，当前的值为0，则加上红色边框，否则去掉红色边框
    if (value == null || value == '' || value == undefined) {
        $(this).css("border-color", "red");
    } else {
        $(this).css("border-color", "");
    }
});
</script>