JQuery写的简单的IP控件

在工作中需要用一些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>

 注：附件是另外一种自定义控件的方式，有兴趣可以使用这个方式再写一遍