IP输入框-基于Jquery

首先，在页面上显示IP输入框

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

}

})

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

IP输入框-基于Jquery相关推荐

jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
Python入门自学进阶-Web框架——8、认识Ajax，与Django交互，基于jQuery
基于jQuery的Ajax实现: jQquery中创建XMLHttpRequest对象就没有兼容性问题了,而且不需要前面的四个步骤,直接使用$.ajax(),通过设置相关的参数,如提交的方法,url, ...
H5C3动画实例，通过基于jQuery的fullpage插件完成
要点: 1.素材是黑马程序员的,自己重写了下代码,主要是为了体会下h5c3. 2.环境 : 3.主要是加入了pullpage的插件特有的功能帮助开发,其中基于jQuery开发的插件,其定义的方法一般都 ...
基于jQuery的软键盘
基于jQuery的软键盘前些天写了一个基于基于jQuery的数字键盘,今天给大家带来一个基于jQuery的全字母键盘插件(支持全字母大小写切换,数字输入,退格清除,关闭功能,可调整大小和键盘位置(可 ...
基于jQuery实现的腾讯互动娱乐网站特效
分享一款基于jQuery实现的腾讯互动娱乐网站特效.腾讯互动娱乐网站jQuery特效是一款右侧带伸缩选项卡,支持鼠标滚轮滚动切换特效代码.效果图如下: 在线预览源码下载实现的代码. html代 ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...

IP输入框-基于Jquery

IP输入框-基于Jquery相关推荐

最新文章

热门文章