js写的IP地址输入框,修改完后的

来源:互联网 发布:python小游戏代码 编辑:程序博客网 时间:2024/05/18 10:22

checkIP.js

-------------

function getvalue(val){
document.getElementById(val).value=ipAddress.GetIPValue();
}
function setValue(val1,val2,val3,val4){
setIpByValue(val1,val2,val3,val4);
}
//str 是否是 byte [0-255整数]类型-----zhangzw新加(输入时 可以删除已输入的内容 即输入框为空)
function IsByte2(str){
if(str==""||str==""){
return true;
}else{
if(str.length>1&&str.substring(0,1)==0){//第一位为0时 不能再输入第二位
return false;
}else if (str.replace(/[0-9]/gi, "") == ""){
       if (parseInt(str)>=0 && parseInt(str)<=255){
           return true;
       }
   }
   return false;
   
  }
}
//str 是否是 byte [0-255整数]类型---提交时 各个ip输入框的完全验证
function IsByte(str){
    if (str.replace(/[0-9]/gi, "") == ""){
        if (parseInt(str)>=0 && parseInt(str)<=255){
            return true;
        }
    }
    return false;
}
//================================================================================
//IP地址控件类
function CIP(ipCtrlIdStr, objNameStr){
    this.ipCtrlIdStr = ipCtrlIdStr;
    this.ipCtrlId = document.getElementById(this.ipCtrlIdStr);
    this.objNameStr = objNameStr;
    
    this.ipFldArr = new Array("", "", "", "");//实时IP字段值
    
    this.Create = CIPCreate;
    this.OnPropertyChng = OnPropertyChng;
    this.OnIPFldKeyDown = OnIPFldKeyDown;
    this.PrevIPFld = PrevIPFld;
    this.NextIPFld = NextIPFld;
    this.SetIPValue = SetIPValue;
    this.GetIPValue = GetIPValue;
}




//构造函数
function CIPCreate(){
    var str = "";
    str += "<div class=\"fld\"><input type=\"text\" size=\"2\" id=\"" + this.ipCtrlIdStr + "_ipfld_1\"" +
           " onkeydown=\"javascript:" + this.objNameStr + ".OnIPFldKeyDown(1);\"></div>" +
           "<div class=\"fldDot\">.</div>" +
           "<div class=\"fld\"><input type=\"text\" size=\"3\" id=\"" + this.ipCtrlIdStr + "_ipfld_2\"" +
           " onkeydown=\"javascript:" + this.objNameStr + ".OnIPFldKeyDown(2);\"></div>" +
           "<div class=\"fldDot\">.</div>" +
           "<div class=\"fld\"><input type=\"text\" size=\"3\" id=\"" + this.ipCtrlIdStr + "_ipfld_3\"" +
           " onkeydown=\"javascript:" + this.objNameStr + ".OnIPFldKeyDown(3);\"></div>" +
           "<div class=\"fldDot\">.</div>" +
           "<div class=\"fld\"><input type=\"text\" size=\"3\" id=\"" + this.ipCtrlIdStr + "_ipfld_4\"" +
           " onkeydown=\"javascript:" + this.objNameStr + ".OnIPFldKeyDown(4);\"></div>"
    this.ipCtrlId.innerHTML = str;
    
    setInterval(this.objNameStr + ".OnPropertyChng()", 10);
}




//确保不输入无效字符
function OnPropertyChng(){
    for (var i=1; i<=4; i++){
        var e = document.getElementById(this.ipCtrlIdStr + "_ipFld_" + i);
        var str = e.value;
        if (!IsByte2(str)){
            e.value = this.ipFldArr[i-1];
        }else{
            this.ipFldArr[i-1] = e.value;
        }
    }
}




//响应箭头和句号按键,以使光标在各字段格间移动
function OnIPFldKeyDown(curFldIndex){
    if (event.keyCode == 37){
        //按下向左键
        this.PrevIPFld(curFldIndex);
        event.returnValue = false;
    }else if (event.keyCode==39 || event.keyCode==190 || event.keyCode==110){
        //按下向右键或句号键
        this.NextIPFld(curFldIndex);
        event.returnValue = false;
    }
}




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




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




//设置 IP 值
//成功返回 true
//失败返回 false,不改变原设置值
function SetIPValue(ipValue){
    var ipFldArr = ipValue.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.ipCtrlIdStr + "_ipFld_1").value = ipFldArr[0];
    document.getElementById(this.ipCtrlIdStr + "_ipFld_2").value = ipFldArr[1];
    document.getElementById(this.ipCtrlIdStr + "_ipFld_3").value = ipFldArr[2];
    document.getElementById(this.ipCtrlIdStr + "_ipFld_4").value = ipFldArr[3];
    return true;
}




//获取 IP 值,IP 值无效,则返回零长度字符串
function GetIPValue(){
    var fld_1 = document.getElementById(this.ipCtrlIdStr + "_ipFld_1").value;
    var fld_2 = document.getElementById(this.ipCtrlIdStr + "_ipFld_2").value;
    var fld_3 = document.getElementById(this.ipCtrlIdStr + "_ipFld_3").value;
    var fld_4 = document.getElementById(this.ipCtrlIdStr + "_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 "";
    }
}
var ipAddress = new CIP("ipAddress", "ipAddress");
ipAddress.Create();
//回填ip地址
function setIpByValue(val1,val2,val3,val4){
document.getElementById("ipAddress_ipFld_1").value=val1;
    document.getElementById("ipAddress_ipFld_2").value=val2;
    document.getElementById("ipAddress_ipFld_3").value=val3;
    document.getElementById("ipAddress_ipFld_4").value=val4;
}


--------------

jsp 中的调用

<div class="ip" id="ipAddress"> </div>
<input id="model.serviceIp" name="model.serviceIp" type="hidden" value="">


提交数据时 需要回填ip值

getvalue("model.serviceIp");//回填ip值