伪代码:
<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>