LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

javascript IP地址控件和MAC地址控件
admin
2011年2月26日 9:56 本文热度 2671
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";//启用时样式  
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<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;  
}  
},  
//获取选区位置  
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");  
}  
//每成功输入一个字每都会激发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";//启用时样式
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<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;
}
},
//获取选区位置
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");
}
//每成功输入一个字每都会激发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";//启用时样式  
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<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;//默认情况下，数字属于大写  
    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;  
    }  
},  
//获取选区位置  
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");  
}  
//每成功输入一个字每都会激发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";//启用时样式
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<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;//默认情况下，数字属于大写
 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;
 }
},
//获取选区位置
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");
}
//每成功输入一个字每都会激发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>
 
    网上的js ip控件比较多，我之所以选择这个，是因为使用它非常方便。取值、设值功能都不错，还有自加、自减功能，当然，浏览器的兼容性也不错。我改装后的MAC控件自然也都继承了这些优点。由于修改时间仓促，多少会有一些不当之处，还希望大家多提宝贵意见，thx~

该文章在 2011/2/26 9:56:11 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved