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", "");

}

})

大概就是这样，附上我自己的截图：