IP输入框-基于Jquery
来源:互联网 发布:python源码剖析第二版 编辑:程序博客网 时间:2024/06/06 12:28
首先,在页面上显示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", "");
}
})
大概就是这样,附上我自己的截图:
阅读全文
0 0
- IP输入框-基于Jquery
- 基于jQuery的饭否输入框
- 基于jquery的搜索框输入提示
- 基于jquery数字加减输入框
- 基于jquery的搜索框输入提示
- 基于 jQuery & CSS3 实现智能提示输入框光标位置
- 基于jquery实现输入框的自动补全功能
- IP地址输入框
- IP地址输入框
- 基于Jquery的输入前提示
- 基于AJAX的输入提示jQuery插件
- 只能输入IP地址的输入框
- 13IP输入框IP ADDRESS
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- 基于JQuery easyUI combobox实现了一个类似google、百度输入框的提示
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- 关于ALUA详解
- 应用:udp聊天器
- pc端hover事件 移入pop间隔时间处理
- monkey基础学习
- (3)RxJava2+Retrofit2+OkHttp3系列(RxJava2-3)
- IP输入框-基于Jquery
- thinkphp+redis+队列
- LMS.Falancs.v2.13-ISO 1CD(疲劳寿命分析软件)
- Ubuntu下给U盘分区
- 利用SecureCRT在windows与linux服务器之间利用ftp进行文件的上传下载
- C++二叉树的前序建立与前中后遍历
- 微服务架构的理论基础
- “智趣相投”行业展示秀,庆科信息基于智能语音的机器人创新平台现场首秀
- 【zjoi2007】棋盘制作