javascript IP地址控件和MAC地址控件

     最近由于项目的需要，要求在页面上使用IP控件和MAC地址控件来美化一下界面。在网上搜到一个不错的IP控件，可惜没有找到相对应的MAC地址控件。没办法，自力更生，花了2个小时的时间，把原有的那个IP控件改装成了一个新的MAC地址控件，感觉还不错~

    IP控件代码(人家的)：

 <textarea cols="50" rows="15" name="code" class="javascript:nogutter">&lt;html&gt;&lt;head&gt;&lt;mce:script &gt;&lt;!--/*** by Li Shangjin.* [url]http://www.13j.cn[/url]**/function IpV4Box(id,pNode){this.id = id;this.onChange=new Function();this.onEnterKey=new Function();this.disabled=false;IpV4Box.all[id]=this;if(pNode){if(typeof pNode=="string"){pNode=document.getElementById(pNode);}pNode.innerHTML=this.toString();}}IpV4Box.all={};IpV4Box.EnabledClassName="ipInput oneInput";//启用时样式IpV4Box.DisabledClassName="ipInput oneInputDisabled";// 禁用时样式IpV4Box.prototype={/*** 激活IP框* @param {number} index 1-4　指定激活的位置*/focus:function(index){if(!index)index=1;document.getElementById(this.id+"_"+index).focus();},setEnable:function(bEnable){var b=!bEnable;this.disabled=!bEnable;var boxes=document.getElementById(this.id).getElementsByTagName("input");for(var i=0;i&lt;boxes.length;i++){boxes.readOnly=b;}document.getElementById(this.id).className=bEnable?IpV4Box.EnabledClassName:IpV4Box.DisabledClassName},toString:function(){return '&lt;span id="'+this.id+'" class="' + IpV4Box.EnabledClassName + '" &gt;/&lt;input onkeypress="IpV4Box.evt.keypress(this,event)" onkeydown="IpV4Box.evt.keydown(this,event)" onfocus="IpV4Box.evt.focus(this,event)" onpaste="IpV4Box.evt.change(this,event);" oninput="IpV4Box.evt.change(this,event);" onchange="IpV4Box.evt.change(this,event);" type="text" size=3 id="'+this.id+'_1" maxlength=3//&gt;.&lt;input onkeypress="IpV4Box.evt.keypress(this,event)" onkeydown="IpV4Box.evt.keydown(this,event)" onfocus="IpV4Box.evt.focus(this,event)" onpaste="IpV4Box.evt.change(this,event);" oninput="IpV4Box.evt.change(this,event);" onchange="IpV4Box.evt.change(this,event);" type="text" size=3 id="'+this.id+'_2" maxlength=3//&gt;.&lt;input onkeypress="IpV4Box.evt.keypress(this,event)" onkeydown="IpV4Box.evt.keydown(this,event)" onfocus="IpV4Box.evt.focus(this,event)" onpaste="IpV4Box.evt.change(this,event);" oninput="IpV4Box.evt.change(this,event);" onchange="IpV4Box.evt.change(this,event);" type="text" size=3 id="'+this.id+'_3" maxlength=3//&gt;.&lt;input onkeypress="IpV4Box.evt.keypress(this,event)" onkeydown="IpV4Box.evt.keydown(this,event)" onfocus="IpV4Box.evt.focus(this,event)" onpaste="IpV4Box.evt.change(this,event);" oninput="IpV4Box.evt.change(this,event);" onchange="IpV4Box.evt.change(this,event);" type="text" size=3 id="'+this.id+'_4" maxlength=3/&gt;/&lt;/span&gt;';},getValue:function(){var ip=[document.getElementById(this.id+"_1").value,document.getElementById(this.id+"_2").value,document.getElementById(this.id+"_3").value,document.getElementById(this.id+"_4").value];return ip.join(".");},setValue:function(ip){ip=ip.replace(/[^/d.]/g,"");if(ip==""){ip="..."}ip=ip.split(".");document.getElementById(this.id+"_1").value = ip[0];document.getElementById(this.id+"_2").value = ip[1];document.getElementById(this.id+"_3").value = ip[2];document.getElementById(this.id+"_4").value = ip[3];}}IpV4Box.evt={focus:function(obj,evt){obj.select();},change:function(obj,evt){var v=parseInt(obj.value);if( v &gt;= 0 &amp;&amp; v &lt;= 255 ){if(v != obj.value)obj.value=v;}else{obj.value="";}IpV4Box.all[ obj.id.replace(/_/d$/,"") ].onChange();},keypress:function(obj,evt){var key=evt.charCode||evt.keyCode;var pos=IpV4Box.evt.getSelection(obj);var value=obj.value;var c=String.fromCharCode(key);if(key&gt;=48 &amp;&amp; key&lt;=57){value=""+value.substring(0,pos.start)+ c + value.substring(pos.end,value.length);if(parseInt(value)&lt;255){var id=obj.id;/(.*)_(/d)$/.test(id);var index=RegExp.$2;IP_id=RegExp.$1;if(parseInt(value)&gt;=100){if(parseInt(index)&lt;4){id=id.replace(/(/d)$/,parseInt(index)+1 );setTimeout("document.getElementById('"+id+"').focus();"+"document.getElementById('"+id+"').select();",200);}}setTimeout("IpV4Box.all['"+IP_id+"'].onChange()",0);return true;}else{if(evt.preventDefault)evt.preventDefault();evt.returnValue=false;return false;}}else{if(evt.preventDefault)evt.preventDefault();evt.returnValue=false;}},keydown:function(obj,evt){var key=evt.charCode||evt.keyCode;var pos=IpV4Box.evt.getSelection(obj);var value=obj.value;var c=String.fromCharCode(key);var id=obj.id;/^(.*)_(/d)$/.test(id);var index=RegExp.$2;var Ip_Id=RegExp.$1;switch(key){case 13://回车IpV4Box.all[Ip_Id].onEnterKey();break;case 110://.小键盘case 190://.主键盘if(index&lt;4){id=id.replace(/(/d)$/,parseInt(index)+1 );document.getElementById(id).focus();document.getElementById(id).select();}break;case 38://upvalue=!isNaN(parseInt(value))?parseInt(value):"";if(value=="")value=0;if(value&lt;255){obj.value=value+1;}elseobj.value=0;break;case 40://downvalue=!isNaN(parseInt(value))?parseInt(value):"";if(value=="")value=255;if(value&gt;0){obj.value=value-1;};break;case 8://backspaceif(pos.start&gt;0)return;case 37://leftif(pos.end==0 &amp;&amp; index&gt;1){id=id.replace(/(/d)$/,parseInt(index)-1 );document.getElementById(id).focus();document.getElementById(id).select();}break;case 39://rightif(pos.start==value.length &amp;&amp; index&lt;4){id=id.replace(/(/d)$/,parseInt(index)+1 );document.getElementById(id).focus();document.getElementById(id).select();}break;}},//获取选区位置getSelection:function(oInput){var T=this;if(oInput.createTextRange){var s=document.selection.createRange().duplicate();s.moveStart("character",-oInput.value.length);var p1=s.text.length;var s=document.selection.createRange().duplicate();s.moveEnd("character",oInput.value.length);var p2=oInput.value.lastIndexOf(s.text);if(s.text=="")p2=oInput.value.length;return {start:p2,end:p1};}else {return {start:oInput.selectionStart,end:oInput.selectionEnd};}}}// --&gt;&lt;/mce:script&gt;&lt;mce:style type="text/css"&gt;&lt;!--/*IP 输入框*/.ipInput{border:1px solid #ccc;font-size:12px;}.ipInput input{border:0px solid #ccc;font-size:12px;height:16px;width:24px;background:transparent;text-align:center;}--&gt;&lt;/mce:style&gt;&lt;style type="text/css" mce_bogus="1"&gt;/*IP 输入框*/.ipInput{border:1px solid #ccc;font-size:12px;}.ipInput input{border:0px solid #ccc;font-size:12px;height:16px;width:24px;background:transparent;text-align:center;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;span id="span1"&gt;&lt;/span&gt;&lt;input type="button" value="ip1.getValue" onclick="alert(ip1.getValue())" /&gt;&lt;p&gt;&lt;span id="span2"&gt;&lt;/span&gt;&lt;mce:script type="text/javascript"&gt;&lt;!--var ip1=new IpV4Box("ip1");document.getElementById("span1").innerHTML=ip1;ip1.focus(1);//激活输入框的第一部分ip1.onEnterKey=function(){alert("ip1 EnterKey");}//每成功输入一个字每都会激发onChange事件ip1.onChange=function(){window.status="ip1 新ip:"+(this.getValue());}ip1.setValue("195.2.199.170");var ip2=new IpV4Box("ip2" , "span2");// --&gt;&lt;/mce:script&gt;&lt;/body&gt;&lt;/html&gt;</textarea>

    MAC地址控件代码(俺改装的)：

 <textarea cols="50" rows="15" name="code" class="javascript:nogutter">&lt;html&gt;&lt;head&gt;&lt;mce:script &gt;&lt;!--/*** by wirror800**/function MacBox(id,pNode){this.id = id;this.onChange=new Function();this.onEnterKey=new Function();this.disabled=false;MacBox.all[id]=this;if(pNode){if(typeof pNode=="string"){pNode=document.getElementById(pNode);}pNode.innerHTML=this.toString();}}MacBox.all={};MacBox.EnabledClassName="macInput oneInput";//启用时样式MacBox.DisabledClassName="macInput oneInputDisabled";// 禁用时样式MacBox.prototype={/*** 激活MAC框* @param {number} index 1-6　指定激活的位置*/focus:function(index){if(!index)index=1;document.getElementById(this.id+"_"+index).focus();},setEnable:function(bEnable){var b=!bEnable;this.disabled=!bEnable;var boxes=document.getElementById(this.id).getElementsByTagName("input");for(var i=0;i&lt;boxes.length;i++){boxes.readOnly=b;}document.getElementById(this.id).className=bEnable?MacBox.EnabledClassName:MacBox.DisabledClassName},toString:function(){return '&lt;span id="'+this.id+'" class="' + MacBox.EnabledClassName + '" &gt;/&lt;input onkeypress="MacBox.evt.keypress(this,event)" onkeydown="MacBox.evt.keydown(this,event)" onfocus="MacBox.evt.focus(this,event)" onpaste="MacBox.evt.change(this,event);" oninput="MacBox.evt.change(this,event);" onchange="MacBox.evt.change(this,event);" type="text" size=2 id="'+this.id+'_1" maxlength=2//&gt;:&lt;input onkeypress="MacBox.evt.keypress(this,event)" onkeydown="MacBox.evt.keydown(this,event)" onfocus="MacBox.evt.focus(this,event)" onpaste="MacBox.evt.change(this,event);" oninput="MacBox.evt.change(this,event);" onchange="MacBox.evt.change(this,event);" type="text" size=2 id="'+this.id+'_2" maxlength=2//&gt;:&lt;input onkeypress="MacBox.evt.keypress(this,event)" onkeydown="MacBox.evt.keydown(this,event)" onfocus="MacBox.evt.focus(this,event)" onpaste="MacBox.evt.change(this,event);" oninput="MacBox.evt.change(this,event);" onchange="MacBox.evt.change(this,event);" type="text" size=2 id="'+this.id+'_3" maxlength=2//&gt;:&lt;input onkeypress="MacBox.evt.keypress(this,event)" onkeydown="MacBox.evt.keydown(this,event)" onfocus="MacBox.evt.focus(this,event)" onpaste="MacBox.evt.change(this,event);" oninput="MacBox.evt.change(this,event);" onchange="MacBox.evt.change(this,event);" type="text" size=2 id="'+this.id+'_4" maxlength=2//&gt;:&lt;input onkeypress="MacBox.evt.keypress(this,event)" onkeydown="MacBox.evt.keydown(this,event)" onfocus="MacBox.evt.focus(this,event)" onpaste="MacBox.evt.change(this,event);" oninput="MacBox.evt.change(this,event);" onchange="MacBox.evt.change(this,event);" type="text" size=2 id="'+this.id+'_5" maxlength=2//&gt;:&lt;input onkeypress="MacBox.evt.keypress(this,event)" onkeydown="MacBox.evt.keydown(this,event)" onfocus="MacBox.evt.focus(this,event)" onpaste="MacBox.evt.change(this,event);" oninput="MacBox.evt.change(this,event);" onchange="MacBox.evt.change(this,event);" type="text" size=2 id="'+this.id+'_6" maxlength=2/&gt;/&lt;/span&gt;';},getValue:function(){var mac=[document.getElementById(this.id+"_1").value,document.getElementById(this.id+"_2").value,document.getElementById(this.id+"_3").value,document.getElementById(this.id+"_4").value,document.getElementById(this.id+"_5").value,document.getElementById(this.id+"_6").value];return mac.join(":");},setValue:function(mac){mac=mac.replace(/[^[a-f0-9]:]/g,"");if(mac==""){mac=":::::"}mac=mac.split(":");document.getElementById(this.id+"_1").value = mac[0];document.getElementById(this.id+"_2").value = mac[1];document.getElementById(this.id+"_3").value = mac[2];document.getElementById(this.id+"_4").value = mac[3];document.getElementById(this.id+"_5").value = mac[4];document.getElementById(this.id+"_6").value = mac[5];}}MacBox.evt={focus:function(obj,evt){obj.select();},change:function(obj,evt){var v = obj.value;var reghex = new RegExp("(^[a-f0-9]{1,2}$)|(^[A-F0-9]{1,2}$)");if(reghex.exec(v)!==null){if(v != obj.value)obj.value=v;}else{obj.value="";}MacBox.all[ obj.id.replace(/_/d$/,"") ].onChange();},keypress:function(obj,evt){var key=evt.charCode||evt.keyCode;var pos=MacBox.evt.getSelection(obj);var value=obj.value;var c=String.fromCharCode(key);if((key&gt;=48 &amp;&amp; key&lt;=57)||(key&gt;=65 &amp;&amp; key&lt;=70)||(key&gt;=97 &amp;&amp; key&lt;=102)){value=""+value.substring(0,pos.start)+ c + value.substring(pos.end,value.length);var reghex = new RegExp("(^[a-f0-9]{1,2}$)|(^[A-F0-9]{1,2}$)");if(reghex.exec(value)!==null){var id=obj.id;/(.*)_(/d)$/.test(id);var index=RegExp.$2;MAC_id=RegExp.$1;if(value.length&gt;1){if(parseInt(index)&lt;6){id=id.replace(/(/d)$/,parseInt(index)+1 );setTimeout("document.getElementById('"+id+"').focus();"+"document.getElementById('"+id+"').select();",200);}}setTimeout("MacBox.all['"+MAC_id+"'].onChange()",0);return true;}else{if(evt.preventDefault)evt.preventDefault();evt.returnValue=false;return false;}}else{if(evt.preventDefault)evt.preventDefault();evt.returnValue=false;}},keydown:function(obj,evt){var key=evt.charCode||evt.keyCode;var pos=MacBox.evt.getSelection(obj);var value=obj.value;var c=String.fromCharCode(key);var id=obj.id;/^(.*)_(/d)$/.test(id);var index=RegExp.$2;var MAC_id=RegExp.$1;var reghexUpcase = new RegExp("(^[A-F0-9]{1,2}$)");var isUpcase;//默认情况下，数字属于大写if(reghexUpcase.exec(value)!==null)isUpcase = true;else isUpcase = false;switch(key){case 13://回车MacBox.all[MAC_id].onEnterKey();break;case 110://.小键盘case 190://.主键盘if(index&lt;6){id=id.replace(/(/d)$/,parseInt(index)+1 );document.getElementById(id).focus();document.getElementById(id).select();}break;case 38://up自加//value=!isNaN(parseInt(value))?parseInt(value):"";if(value=="")value=0;if(parseInt(value,16)&lt;parseInt("FF",16)){ if(isUpcase){obj.value=(parseInt(value,16)+1).toString(16).toUpperCase();}else{obj.value=(parseInt(value,16)+1).toString(16);}}elseobj.value=0;break;case 40://down自减//value=!isNaN(parseInt(value))?parseInt(value):"";if(value=="")value="FF";if(parseInt(value,16)&gt;0){ if(isUpcase){obj.value=(parseInt(value,16)-1).toString(16).toUpperCase();}else{obj.value=(parseInt(value,16)-1).toString(16);}};break;case 8://backspaceif(pos.start&gt;0)return;case 37://leftif(pos.end==0 &amp;&amp; index&gt;1){id=id.replace(/(/d)$/,parseInt(index)-1 );document.getElementById(id).focus();document.getElementById(id).select();}break;case 39://rightif(pos.start==value.length &amp;&amp; index&lt;6){id=id.replace(/(/d)$/,parseInt(index)+1 );document.getElementById(id).focus();document.getElementById(id).select();}break;}},//获取选区位置getSelection:function(oInput){var T=this;if(oInput.createTextRange){var s=document.selection.createRange().duplicate();s.moveStart("character",-oInput.value.length);var p1=s.text.length;var s=document.selection.createRange().duplicate();s.moveEnd("character",oInput.value.length);var p2=oInput.value.lastIndexOf(s.text);if(s.text=="")p2=oInput.value.length;return {start:p2,end:p1};}else {return {start:oInput.selectionStart,end:oInput.selectionEnd};}}}// --&gt;&lt;/mce:script&gt;&lt;mce:style type="text/css"&gt;&lt;!--/*IP 输入框*/.macInput{border:1px solid #ccc;font-size:12px;}.macInput input{border:0px solid #ccc;font-size:12px;height:16px;width:24px;background:transparent;text-align:center;}--&gt;&lt;/mce:style&gt;&lt;style type="text/css" mce_bogus="1"&gt;/*IP 输入框*/.macInput{border:1px solid #ccc;font-size:12px;}.macInput input{border:0px solid #ccc;font-size:12px;height:16px;width:24px;background:transparent;text-align:center;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;span id="span1"&gt;&lt;/span&gt;&lt;input type="button" value="mac1.getValue" onClick="alert(mac1.getValue())" /&gt;&lt;p&gt;&lt;span id="span2"&gt;&lt;/span&gt;&lt;mce:script type="text/javascript"&gt;&lt;!--var mac1=new MacBox("mac1");document.getElementById("span1").innerHTML=mac1;mac1.focus(1);//激活输入框的第一部分mac1.onEnterKey=function(){alert("mac1 EnterKey");}//每成功输入一个字每都会激发onChange事件mac1.onChange=function(){window.status="mac1 新mac:"+(this.getValue());}mac1.setValue("EF:00:34:3A:11:B2");var mac2=new MacBox("mac2" , "span2");// --&gt;&lt;/mce:script&gt;&lt;/body&gt;&lt;/html&gt;</textarea>

    网上的js ip控件比较多，我之所以选择这个，是因为使用它非常方便。取值、设值功能都不错，还有自加、自减功能，当然，浏览器的兼容性也不错。我改装后的MAC控件自然也都继承了这些优点。由于修改时间仓促，多少会有一些不当之处，还希望大家多提宝贵意见，thx~