在工作中需要用一些IP控件,就自己照着写了一个简单的雏形,下面是源码,请有兴趣的各位帮忙完善指正
1、JQuery代码
(function($) { $.fn.ipinput = function(options) { // 默认属性 var defaults = { // 长度最低支持110像素 width : 110, // 高度默认20像素 height : 20, // 在键盘按下时用来存储未输入前的值 currValue : '', // 原有值,就是从数据库中读取到的值 value : '' } // 传递的参数 var options = $.extend(defaults, options); // 输入框对象及父级对象 var $this = $(this); var $parent = $this.parent(); // 隐藏输入框(该输入框用于存储实际值) $this.attr({style : 'display:none'}); // 输入控件代码 var html = ''; html += '<div class="ipinput_div">'; html += '<input type="text" id="ipOne" class="ipinput_input"/>'; html += '<span class="ipinput_separator">.</span>'; html += '<input type="text" id="ipTwo" class="ipinput_input"/>'; html += '<span class="ipinput_separator">.</span>'; html += '<input type="text" id="ipThree" class="ipinput_input"/>'; html += '<span class="ipinput_separator">.</span>'; html += '<input type="text" id="ipFour" class="ipinput_input"/>'; html += '</div>'; // 添加输入控件代码 $parent.append(html); // 把原有的值赋到输入框中 if(!isEmpty(options.value)) { var valArr = options.value.split("."); if(4 == valArr.length) { $('#ipOne').val(valArr[0]); $('#ipTwo').val(valArr[1]); $('#ipThree').val(valArr[2]); $('#ipFour').val(valArr[3]); } } // 设置宽度和高度 $('.ipinput_div').width(options.width); $('.ipinput_div').height(options.height); alert($('input', $('.ipinput_div'))); // 输入框绑定键盘按下事件 $('.ipinput_input').keydown(function(event) { keydown(event); }); // 输入框绑定键盘按下弹起事件 $('.ipinput_input').keyup(function(event) { keyup(event); }); // 输入框失去焦点事件 $('.ipinput_input').blur(function() { setData($this); }); }; // 判断参数是否为空 var isEmpty = function(obj) { if(null == obj) { return true; } else if(undefined == obj) { return true; } else if("" == obj) { return true; } else { return false; } }; // 赋值给隐藏框 var setData = function(inputObj) { // 四个框的值 var one = $('#ipOne').val(); var two = $('#ipTwo').val(); var three = $('#ipThree').val(); var four = $('#ipFour').val(); // 如果四个框都有值则赋值给隐藏框 if(!isEmpty(one) && !isEmpty(two) && !isEmpty(three) && !isEmpty(four)) { var ip = one + "." + two + "." + three + "." + four; inputObj.val(ip); } } // 键盘按下事件 var keydown = function(event) { // 当前输入的键盘值 var code = event.keyCode; // 除了数字键、删除键、小数点之外全部不允许输入 if((code < 48 && 8 != code && 37 != code && 39 != code) || (code > 57 && code < 96) || (code > 105 && 110 != code && 190 != code)) { return false; } // 先存储输入前的值,用于键盘弹起时判断值是否正确 options.currValue = $(this).val(); // 110、190代表键盘上的两个点 if(110 == code || 190 == code) { // 当前输入框的ID var id = $(this).attr("id"); // 当前输入框的值 var value = $(this).val(); // 如果是第一个框则第二个框获的焦点 if("ipOne" == id && !isEmpty(value)) { $('#ipTwo').focus(); return false; } // 如果是第二个框则第三个框获的焦点 else if("ipTwo" == id && !isEmpty(value)) { $('#ipThree').focus(); return false; } // 如果是第三个框则第四个框获的焦点 else if("ipThree" == id && !isEmpty(value)) { $('#ipFour').focus(); return false; } // 如果是第四个框则直接返回 else if("ipFour" == id) { return false; } else if(isEmpty(value)) { return false; } } } // 键盘弹起事件 var keyup = function(event) { // 当前值 var value = $(this).val(); if(!isEmpty(value)) { value = parseInt(value); if(value > 255) { $(this).val(options.currValue) } else if(value > 99) { // 当前输入框的ID var id = $(this).attr("id"); // 如果是第一个框则第二个框获的焦点 if("ipOne" == id && !isEmpty(value)) { $('#ipTwo').focus(); } // 如果是第二个框则第三个框获的焦点 else if("ipTwo" == id && !isEmpty(value)) { $('#ipThree').focus(); } // 如果是第三个框则第四个框获的焦点 else if("ipThree" == id && !isEmpty(value)) { $('#ipFour').focus(); } } } } })(jQuery);
2、CSS代码
.ipinput_input { border-color : #b99d7f; border-style : solid; border-width : 0px; background-color : #ffffff; margin-right : -5px; margin-left : 0px; margin-top : 0px; margin-bottom : 0px; width : 22%; height : 90%; } .ipinput_separator { margin-right : 2px; margin-left : 2px; font-weight : bolder; font-size : 14px; } .ipinput_div { border-color : #86A3C4; border-style : solid; border-width : 1px; }
3、HTML代码
<input name="aucIpAddr" type="text" style="width:200px"/>
4、JS代码
$('input[name=aucIpAddr]').ipinput( { width : 201, height : 20, value : "192.168.1.2" });
5、HTML页面引用
<link rel="stylesheet" type="text/css" href="../../css/ipinput.css"/> <script type="text/javascript" src="../../script/jquery.min.js"></script> <script type="text/javascript" src="../../script/ipinput.js"></script>
注:附件是另外一种自定义控件的方式,有兴趣可以使用这个方式再写一遍
相关推荐
可以满足IP地址输入的格式,计算机MAC地址的输入格式,非常好用,是从网上找的源码,经过修改,已经可以使用.
本人使用的还是 jQuery 框架,因为这样简短的代码可能会更容易理解。 当然这个控件还有很多需要完成的地方,我仅仅是提供了一种遵循 Web 标准的实现思路。废话不多说. Javascript Progress Bar Demo – jb51...
一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家。 主要功能和界面介绍 国籍控件主要支持中文、英文过滤以及键盘上下事件。 源码介绍 国籍控件核心是两个文件,navtionality.js 和 mian....
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
很多的时候用户需要等待你“臃肿”的 Javascript...本人使用的还是 jQuery 框架,因为这样简短的代码可能会更容易理解。 当然这个控件还有很多需要完成的地方,我仅仅是提供了一种遵循 Web 标准的实现思路。废话不
在ASP.NET中使用js时,js获取DOM元素时,经常获取不到,这是因为获取的方法有误,现在介绍一方法,解决如何使用js获取ASP...可以通过js,document来获取也可以借助jquery来获取,这里以jquery来示例 代码如下: var new
获取本地的IP、MAC地址、主机名。通过引用c:/windows/system32下的控件,获取本地IP
第一次使用登录控件Login,也是第一次碰到这个错误,于是百度了一下,问题是解决了,但还只是知其然不知其所以然,不晓得是为什么。 咱们直接看图片: 解决方法如下: 方法一 修改Web.config文件如下: 方法二 ...
以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了。可能最值得说的一点...
实例如下: <!...<... <head>...javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样,在编辑框下面显示一个层)</title> <script type="text/javascript" src="jquery-1.3.
解答学生问题--一个ip绑定多个域名 8-19 2.php运行过程时序图 php书写规范 8-19 3.php基本语法介绍 php数据类型介绍 8-19 4.整型细节说明 8-19 5.布尔细节 浮点数细节 字符串细节 算术运算符① 8-19 6.算术运算符② ...
1.ExtJS TreePanels TreePanels 是ExtJS自身使用的树控件,它是目前最好用的树控件之一,它有诸多优点...jstree兼容多个浏览器,它有诸多跟extjs TreePanels一样的有点,不过由于是基于Jquery的插件,所以代码风格就
利用node接收到的ip数组组装url后对百度地图api发送请求并返回请求结果数组给前端 1. 前端代码部分(jquery) 重要步骤: 1> 引用百度地图 2> 实例化百度地图,添加相关缩放控件,设置主图 3> 重写http请求,设置...
1. Farbtastic ...一个简单的颜色选择控件。操作方式与Adobe photoshop中颜色选择操作置。 4. iColorPicker iColorPicker是一个只有6KB大小的jQuery Color Picker。只要将输入框的class属性设置为 5. dhtml
本文为大家分享了一个炫酷的js日历控件,供大家参考,具体内容如下 引用JSLit.js 下载 JSLite.io,兼容 JSLite 和 jQuery 安装方法 页面引用 JSLite 或者jQuery <div id=JSLiteCalenbar4><input type=text>...
此示例演示了如何在网页中嵌入Bing Map控件,获取某一点的地图信息。通过使用Bing Map的查询功能,我们还能输入某一个地点的名称,查询这个地点在地图中的方位。 VBASPNETRemoteUploadAndDownload 本本示例展示了如何...
小菜想通过事件中的信息,确定下一级的菜单,但是这个貌似很简单的问题,却让小菜纠结了一番。 稍微懂点JQuery的童鞋,可能会尝试这样获取: 代码如下: $(document).ready(function(){ var onchangeValue = $...
程序使用了jquery控件、jquery uploadify上传插件、weekcalendar日程插件、xheditor HTML编辑插件、化境无组件。 ASOFT签到管理系统 v3.7 更新一览 【新增功能】 1、增加"IP防代签启用时是否IP可以共用"功能,你...
Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,日期选择 Java语言开发的简洁实用的日期选择控件,源码文件功能说明: [DateChooser.java] Java 日期选择控件(主体类) [public] ...