javascript ip地址 输入控件

javascript ip地址 输入控件

代码如下:

 

< html >

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > IP地址控件 </ title >
< style  type ="text/css" > ...
.ip
{...}{
    border:1px solid #666666;
    width:120px;
    font-size:12px;
}
.ip_fld
{...}{
    float:left;
    width:25px;
}
.ip_fld input
{...}{
    border:none;
    width:25px;
}

.ip_dot
{...}{
    float:left;
    width:5px;
}
</ style >
</ head >

< body  onload ="Ips_init()" >

< hr >

< p > IP地址：
     < div  class ="ip" >
         < div  id ="ipAddress"  value ="127.0.0.1" ></ div >
     </ div >


< script  type ="text/javascript"  language ="javascript" > ...
<!--
//str 是否是 byte [0-255整数]类型
function IsByte(str)
...{
    if (str.replace(/[0-9]/gi, "") == "")
    ...{
        if (parseInt(str)>=0 && parseInt(str)<=255)
        ...{
            return true;
        }
    }
    
    return false;
}




function Ips_init() ...{
    /**//* 取到所有的ip标签，得到数组 */
    var tags = document.getElementsByTagName(_IP);
    if(!tags || tags.length == 0) ...{
        tags = document.getElementsByTagName(_ZIP);
    }
    
    if(!tags || tags.length == 0) ...{
        var divElem = document.getElementById("ipAddress");
        var id = divElem.getAttribute("id");
        var value = divElem.getAttribute("value");
        
        ipObj = new SSB_IP(id);
        ipObj.init();
        ipObj.setValue(value);
    }
else ...{
    /**//* 遍历上述数组，对每一个数组元素生成一个ip控件对象，调用其初始化方法 */
    var ip = ...{};
    for(var i = 0; i < tags.length; i++) ...{
        var id = tags[i].getAttribute("id");
        var value = tags[i].getAttribute("value");
        
        ipObj = new SSB_IP(id);
        ipObj.init();
        ipObj.setValue(value);
    }
}
}


//================================================================================
// IP地址控件类
function SSB_IP(id)
...{
    this.id = id;
    this.element = document.getElementById(this.id);
    this.ipFldArr = new Array("", "", "", "");//实时IP字段值
}

SSB_IP.prototype=...{
    
    init:function() ...{
      var str = "";
    str += "<div class="ip_fld"><input type="text" size="3" maxlength="3" id="" + this.id + "_ipFld_1"" +
           " οnkeydοwn="OnIPFldKeyDown('" + this.id + "', 1, event)" οnchange="OnIPFldChange('" + this.id + "', 1, event)" ></div>" +
           "<div class="ip_dot">.</div>" +
           "<div class="ip_fld"><input type="text" size="3" maxlength="3" id="" + this.id + "_ipFld_2"" +
           " οnkeydοwn="OnIPFldKeyDown('" + this.id + "', 2, event)" οnchange="OnIPFldChange('" + this.id + "', 2, event)" ></div>" +
           "<div class="ip_dot">.</div>" +
           "<div class="ip_fld"><input type="text" size="3" maxlength="3" id="" + this.id + "_ipFld_3"" +
           " οnkeydοwn="OnIPFldKeyDown('" + this.id + "', 3, event)" οnchange="OnIPFldChange('" + this.id + "', 3, event)" ></div>" +
           "<div class="ip_dot">.</div>" +
           "<div class="ip_fld"><input type="text" size="3" maxlength="3" id="" + this.id + "_ipFld_4"" +
           " οnkeydοwn="OnIPFldKeyDown('" + this.id + "', 4, event)" οnchange="OnIPFldChange('" + this.id + "', 4, event)" ></div><div style="clear:both;display=none;" />";
    
    this.element.innerHTML = str;
    SSB_IP.ipObjs[this.id] = this;
    },
    
    /**//* 获取 IP 值，IP 值无效，则返回零长度字符串 */
    getValue:function() ...{
        var fld_1 = document.getElementById(this.id + "_ipFld_1").value;
    var fld_2 = document.getElementById(this.id + "_ipFld_2").value;
    var fld_3 = document.getElementById(this.id + "_ipFld_3").value;
    var fld_4 = document.getElementById(this.id + "_ipFld_4").value;
    
    if (IsByte(fld_1) && IsByte(fld_2) & IsByte(fld_3) & IsByte(fld_4))
    ...{
        return fld_1 + "." + fld_2 + "." + fld_3 + "." + fld_4;
    }
    else
    ...{
        return "";
    }
    },
    
    /**//* 设置 IP 值  成功返回 true  失败返回 false，不改变原设置值 */
    setValue:function(initValue) ...{

        var ipFldArr = initValue.split(".");
    if (ipFldArr.length != 4)
    ...{
        return false;
    }
    else if (!IsByte(ipFldArr[0]) || !IsByte(ipFldArr[1]) || !IsByte(ipFldArr[2]) || !IsByte(ipFldArr[3]))
    ...{
        return false;
    }
    
    document.getElementById(this.id + "_ipFld_1").value = ipFldArr[0];
    document.getElementById(this.id + "_ipFld_2").value = ipFldArr[1];
    document.getElementById(this.id + "_ipFld_3").value = ipFldArr[2];
    document.getElementById(this.id + "_ipFld_4").value = ipFldArr[3];
   
    return true;
    }
    
};

//确保不输入无效字符
function OnIPFldChange(id, curFldIndex, oEvent)
...{
    
//alert("11" + id);
          var ipObj = SSB_IP.ipObjs[id];
        var ipFldElem = document.getElementById(id + "_ipFld_" + curFldIndex);
         
        var ipFldValue = ipFldElem.value;
        if (!IsByte(ipFldValue))
        ...{
            //alert(ipObj.ipFldArr[curFldIndex-1]);
            //document.getElementById("edit").value += ipObj.ipFldArr[curFldIndex-1] +" --> "+ipFldValue +" ";     
          ipFldElem.value = ipObj.ipFldArr[curFldIndex-1];
        }
        else
        ...{            
            ipObj.ipFldArr[curFldIndex-1] = ipFldValue;
        }
    
}

//响应箭头和句号按键，以使光标在各字段格间移动
function OnIPFldKeyDown(id, curFldIndex, oEvent)
...{

    if(window.event) ...{
          if (event.keyCode == 37)
    ...{
        //按下向左键
        this.PrevIPFld(id, curFldIndex);
        event.returnValue = false;
    }
    else if (event.keyCode==39 || event.keyCode==190)
    ...{
        //按下向右键或句号键
        this.NextIPFld(id, curFldIndex);
        event.returnValue = false;
    }
    }
    else ...{        
            if (oEvent.keyCode == 37)
    ...{
        //按下向左键
        this.PrevIPFld(id, curFldIndex);
        oEvent.preventDefault();
    }
    else if (oEvent.keyCode==39 || oEvent.keyCode==190)
    ...{
        //按下向右键或句号键
        this.NextIPFld(id, curFldIndex);
        oEvent.preventDefault();
    }
    }
  
}

//下一个字段格
function PrevIPFld(id, curFldIndex)
...{
    if (curFldIndex > 1)
    ...{
        document.getElementById(id + "_ipFld_" + (--curFldIndex)).select();
    }
}

//上一个字段格
function NextIPFld(id, curFldIndex)
...{
    
    if (curFldIndex < 4)
    ...{
        document.getElementById(id + "_ipFld_" + (++curFldIndex)).select();
    }
}


var _IP = "IP";
var _ZIP = "Z:IP";
SSB_IP.ipObjs=...{};


function getLastValue() ...{
    
     for(att in SSB_IP.ipObjs)...{
     var ipObj = SSB_IP.ipObjs[att]
         alert(ipObj.getValue());
     }
}

//-->
</ script >

< hr >
< input    type ="button"    value ="separate"    onclick ="getLastValue()"    ID ="Button1"    NAME ="Button1" >  

</ body >

</ html >