IP输入框-基于Jquery

首先,在页面上显示IP输入框
<input type="text" name="ip_b_1" id="ip_b_1" class="ip-input"/>.<input type="text" name="ip_b_2" id="ip_b_2" class="ip-input"/>.<input type="text" name="ip_b_3" id="ip_b_3" class="ip-input"/>.<input type="text" name="ip_b_4" id="ip_b_4" class="ip-input"/>
一共有4个input, 用来分别存放ip地址的数值
为了美观,可以为每个input 设置css,例如我设置如下( 每个人的样式可能都不一样,大家更具自己的具体需要设置css):
.ip-input{
display: inline !important;
width: 70px !important;
clear: none;
text-align: center;
}
关键的地方是className,例如上面的.ip-input,因为下面需要为它绑定基本的事件

绑定事件如下:

新建一个 ip-num.js 然后在页面引入,当然,引入ip-num.js文件之前,你 需要引入jquery ,因为下面需要使用到jquery

ip-num.js:

/* 检测ip类型的输入框的基本操作, 适合dns subnet gateway*/
// 目标样式, 这里是上面的className
var goal = ".ip-input";
// ip输入框的最大值
var ip_max = 255;

// 监听键盘输入事件
$(goal).bind("keydown", function(event){
//console.log($(this).attr("id"))
var 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) {
$(this).next().focus();
return false;
}
})
// 监听键盘离开事件
$(goal).bind("keyup", function(event){
// 判断当前输入框的值
var value = $(this).val();
// 如果输入的值大于ip最大值,则去掉最后一位数字
if(value != null && value != '' && parseInt(value) > ip_max) {
value = value.substring(0, value.length-1);
$(this).val(value);
return false;
}
// 如果输入框的值大于100,并且符合规则,则跳转到下一个输入框
if(value != null && value != '' && parseInt(value) > 100 && parseInt(value) <= ip_max) {
$(this).next().focus();
return false;
}
// 判断是否是0开头的不规范数字
if(value != null && value != '' && parseInt(value) != 0) {
// 如果当前输入的是0开头,则把0去掉,方法是直接转数字即可
value = parseInt(value);
if(isNaN(value)){
$(this).val("");
}else {
$(this).val(""+value);
}
}
})
// 失去焦点事件
$(goal).bind("blur", function(){
var value = $(this).val();
// 如果失去焦点,当前的值为0,则加上红色边框,否则去掉红色边框
if(value == null || value == '' || value == undefined) {
$(this).css("border-color", "#F08080");
}else {
$(this).css("border-color", "");
}
})

大概就是这样,附上我自己的截图:


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页