javascript IP地址控件和MAC地址控件
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
IP控件代碼: view plaincopy to clipboardprint? <html> <head> <mce:script ><!-- /** * 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";//啟用時(shí)樣式 IpV4Box.DisabledClassName="ipInput oneInputDisabled";// 禁用時(shí)樣式 IpV4Box.prototype={ /** * 激活I(lǐng)P框 * @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<boxes.length;i++) { boxes.readOnly=b; } document.getElementById(this.id).className=bEnable?IpV4Box.EnabledClassName:IpV4Box.DisabledClassName }, toString:function(){ return '<span id="'+this.id+'" class="' + IpV4Box.EnabledClassName + '" >\ <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\ />.<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\ />.<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\ />.<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/>\ </span>'; }, 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 >= 0 && v <= 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>=48 && key<=57) { value=""+value.substring(0,pos.start) + c + value.substring(pos.end,value.length); if(parseInt(value)<255) { var id=obj.id; /(.*)_(\d)$/.test(id); var index=RegExp.$2; IP_id=RegExp.$1; if(parseInt(value)>=100) { if(parseInt(index)<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<4) { 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(value<255) { obj.value=value+1; } else obj.value=0; break; case 40://down value=!isNaN(parseInt(value))?parseInt(value):""; if(value=="") value=255; if(value>0) { obj.value=value-1; }; break; case 8://backspace if(pos.start>0) return; case 37://left if(pos.end==0 && index>1) { id=id.replace(/(\d)$/,parseInt(index)-1 ); document.getElementById(id).focus(); document.getElementById(id).select(); } break; case 39://right if(pos.start==value.length && index<4) { id=id.replace(/(\d)$/,parseInt(index)+1 ); document.getElementById(id).focus(); document.getElementById(id).select(); } break; } }, //獲取選區(qū)位置 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}; } } } // --></mce:script> <mce:style type="text/css"><!-- /*IP 輸入框*/ .ipInput{ border:1px solid #ccc; } .ipInput input{ border:0px solid #ccc; height:16px; width:24px; background:transparent; text-align:center; } --></mce:style><style type="text/css" mce_bogus="1">/*IP 輸入框*/ .ipInput{ border:1px solid #ccc; } .ipInput input{ border:0px solid #ccc; height:16px; width:24px; background:transparent; text-align:center; }</style> </head> <body> <span id="span1"></span> <input type="button" value="ip1.getValue" onclick="alert(ip1.getValue())" /> <p> <span id="span2"></span> <mce:script type="text/javascript"><!-- var ip1=new IpV4Box("ip1"); document.getElementById("span1").innerHTML=ip1; ip1.focus(1);//激活輸入框的第一部分 ip1.onEnterKey=function(){ alert("ip1 EnterKey"); } //每成功輸入一個(gè)字每都會(huì)激發(fā)onChange事件 ip1.onChange=function(){ window.status="ip1 新ip:"+(this.getValue()); } ip1.setValue("195.2.199.170"); var ip2=new IpV4Box("ip2" , "span2"); // --></mce:script> </body> </html> <html> <head> <mce:script ><!-- /** * 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";//啟用時(shí)樣式 IpV4Box.DisabledClassName="ipInput oneInputDisabled";// 禁用時(shí)樣式 IpV4Box.prototype={ /** * 激活I(lǐng)P框 * @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<boxes.length;i++) { boxes.readOnly=b; } document.getElementById(this.id).className=bEnable?IpV4Box.EnabledClassName:IpV4Box.DisabledClassName }, toString:function(){ return '<span id="'+this.id+'" class="' + IpV4Box.EnabledClassName + '" >\ <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\ />.<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\ />.<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\ />.<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/>\ </span>'; }, 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 >= 0 && v <= 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>=48 && key<=57) { value=""+value.substring(0,pos.start) + c + value.substring(pos.end,value.length); if(parseInt(value)<255) { var id=obj.id; /(.*)_(\d)$/.test(id); var index=RegExp.$2; IP_id=RegExp.$1; if(parseInt(value)>=100) { if(parseInt(index)<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<4) { 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(value<255) { obj.value=value+1; } else obj.value=0; break; case 40://down value=!isNaN(parseInt(value))?parseInt(value):""; if(value=="") value=255; if(value>0) { obj.value=value-1; }; break; case 8://backspace if(pos.start>0) return; case 37://left if(pos.end==0 && index>1) { id=id.replace(/(\d)$/,parseInt(index)-1 ); document.getElementById(id).focus(); document.getElementById(id).select(); } break; case 39://right if(pos.start==value.length && index<4) { id=id.replace(/(\d)$/,parseInt(index)+1 ); document.getElementById(id).focus(); document.getElementById(id).select(); } break; } }, //獲取選區(qū)位置 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}; } } } // --></mce:script> <mce:style type="text/css"><!-- /*IP 輸入框*/ .ipInput{ border:1px solid #ccc; } .ipInput input{ border:0px solid #ccc; height:16px; width:24px; background:transparent; text-align:center; } --></mce:style><style type="text/css" mce_bogus="1">/*IP 輸入框*/ .ipInput{ border:1px solid #ccc; } .ipInput input{ border:0px solid #ccc; height:16px; width:24px; background:transparent; text-align:center; }</style> </head> <body> <span id="span1"></span> <input type="button" value="ip1.getValue" onclick="alert(ip1.getValue())" /> <p> <span id="span2"></span> <mce:script type="text/javascript"><!-- var ip1=new IpV4Box("ip1"); document.getElementById("span1").innerHTML=ip1; ip1.focus(1);//激活輸入框的第一部分 ip1.onEnterKey=function(){ alert("ip1 EnterKey"); } //每成功輸入一個(gè)字每都會(huì)激發(fā)onChange事件 ip1.onChange=function(){ window.status="ip1 新ip:"+(this.getValue()); } ip1.setValue("195.2.199.170"); var ip2=new IpV4Box("ip2" , "span2"); // --></mce:script> </body> </html> MAC地址控件代碼: view plaincopy to clipboardprint? <html> <head> <mce:script ><!-- /** * 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";//啟用時(shí)樣式 MacBox.DisabledClassName="macInput oneInputDisabled";// 禁用時(shí)樣式 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<boxes.length;i++) { boxes.readOnly=b; } document.getElementById(this.id).className=bEnable?MacBox.EnabledClassName:MacBox.DisabledClassName }, toString:function(){ return '<span id="'+this.id+'" class="' + MacBox.EnabledClassName + '" >\ <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\ />:<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\ />:<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\ />:<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\ />:<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\ />:<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/>\ </span>'; }, 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>=48 && key<=57)||(key>=65 && key<=70)||(key>=97 && key<=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>1) { if(parseInt(index)<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;//默認(rèn)情況下,數(shù)字屬于大寫 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<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)<parseInt("FF",16)) { if(isUpcase){ obj.value=(parseInt(value,16)+1).toString(16).toUpperCase(); }else{ obj.value=(parseInt(value,16)+1).toString(16); } } else obj.value=0; break; case 40://down自減 //value=!isNaN(parseInt(value))?parseInt(value):""; if(value=="") value="FF"; if(parseInt(value,16)>0) { if(isUpcase){ obj.value=(parseInt(value,16)-1).toString(16).toUpperCase(); }else{ obj.value=(parseInt(value,16)-1).toString(16); } }; break; case 8://backspace if(pos.start>0) return; case 37://left if(pos.end==0 && index>1) { id=id.replace(/(\d)$/,parseInt(index)-1 ); document.getElementById(id).focus(); document.getElementById(id).select(); } break; case 39://right if(pos.start==value.length && index<6) { id=id.replace(/(\d)$/,parseInt(index)+1 ); document.getElementById(id).focus(); document.getElementById(id).select(); } break; } }, //獲取選區(qū)位置 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}; } } } // --></mce:script> <mce:style type="text/css"><!-- /*IP 輸入框*/ .macInput{ border:1px solid #ccc; } .macInput input{ border:0px solid #ccc; height:16px; width:24px; background:transparent; text-align:center; } --></mce:style><style type="text/css" mce_bogus="1">/*IP 輸入框*/ .macInput{ border:1px solid #ccc; } .macInput input{ border:0px solid #ccc; height:16px; width:24px; background:transparent; text-align:center; }</style> </head> <body> <span id="span1"></span> <input type="button" value="mac1.getValue" onClick="alert(mac1.getValue())" /> <p> <span id="span2"></span> <mce:script type="text/javascript"><!-- var mac1=new MacBox("mac1"); document.getElementById("span1").innerHTML=mac1; mac1.focus(1);//激活輸入框的第一部分 mac1.onEnterKey=function(){ alert("mac1 EnterKey"); } //每成功輸入一個(gè)字每都會(huì)激發(fā)onChange事件 mac1.onChange=function(){ window.status="mac1 新mac:"+(this.getValue()); } mac1.setValue("EF:00:34:3A:11:B2"); var mac2=new MacBox("mac2" , "span2"); // --></mce:script> </body> </html> <html> <head> <mce:script ><!-- /** * 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";//啟用時(shí)樣式 MacBox.DisabledClassName="macInput oneInputDisabled";// 禁用時(shí)樣式 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<boxes.length;i++) { boxes.readOnly=b; } document.getElementById(this.id).className=bEnable?MacBox.EnabledClassName:MacBox.DisabledClassName }, toString:function(){ return '<span id="'+this.id+'" class="' + MacBox.EnabledClassName + '" >\ <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\ />:<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\ />:<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\ />:<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\ />:<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\ />:<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/>\ </span>'; }, 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>=48 && key<=57)||(key>=65 && key<=70)||(key>=97 && key<=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>1) { if(parseInt(index)<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;//默認(rèn)情況下,數(shù)字屬于大寫 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<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)<parseInt("FF",16)) { if(isUpcase){ obj.value=(parseInt(value,16)+1).toString(16).toUpperCase(); }else{ obj.value=(parseInt(value,16)+1).toString(16); } } else obj.value=0; break; case 40://down自減 //value=!isNaN(parseInt(value))?parseInt(value):""; if(value=="") value="FF"; if(parseInt(value,16)>0) { if(isUpcase){ obj.value=(parseInt(value,16)-1).toString(16).toUpperCase(); }else{ obj.value=(parseInt(value,16)-1).toString(16); } }; break; case 8://backspace if(pos.start>0) return; case 37://left if(pos.end==0 && index>1) { id=id.replace(/(\d)$/,parseInt(index)-1 ); document.getElementById(id).focus(); document.getElementById(id).select(); } break; case 39://right if(pos.start==value.length && index<6) { id=id.replace(/(\d)$/,parseInt(index)+1 ); document.getElementById(id).focus(); document.getElementById(id).select(); } break; } }, //獲取選區(qū)位置 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}; } } } // --></mce:script> <mce:style type="text/css"><!-- /*IP 輸入框*/ .macInput{ border:1px solid #ccc; } .macInput input{ border:0px solid #ccc; height:16px; width:24px; background:transparent; text-align:center; } --></mce:style><style type="text/css" mce_bogus="1">/*IP 輸入框*/ .macInput{ border:1px solid #ccc; } .macInput input{ border:0px solid #ccc; height:16px; width:24px; background:transparent; text-align:center; }</style> </head> <body> <span id="span1"></span> <input type="button" value="mac1.getValue" onClick="alert(mac1.getValue())" /> <p> <span id="span2"></span> <mce:script type="text/javascript"><!-- var mac1=new MacBox("mac1"); document.getElementById("span1").innerHTML=mac1; mac1.focus(1);//激活輸入框的第一部分 mac1.onEnterKey=function(){ alert("mac1 EnterKey"); } //每成功輸入一個(gè)字每都會(huì)激發(fā)onChange事件 mac1.onChange=function(){ window.status="mac1 新mac:"+(this.getValue()); } mac1.setValue("EF:00:34:3A:11:B2"); var mac2=new MacBox("mac2" , "span2"); // --></mce:script> </body> </html> 網(wǎng)上的js ip控件比較多,我之所以選擇這個(gè),是因?yàn)槭褂盟浅7奖?。取值、設(shè)值功能都不錯(cuò),還有自加、自減功能,當(dāng)然,瀏覽器的兼容性也不錯(cuò)。我改裝后的MAC控件自然也都繼承了這些優(yōu)點(diǎn)。由于修改時(shí)間倉促,多少會(huì)有一些不當(dāng)之處,還希望大家多提寶貴意見,thx~
該文章在 2011/2/26 9:56:11 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |