【www.gdgbn.com--js教程】



<script >

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.readOnly=b;
  }
  document.getElementById(this.id).className=bEnable?IpV4Box.EnabledClassName:IpV4Box.DisabledClassName
 },
 toString:function(){
  return "
       />.    />.    />.
  ";
 },
 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};
   
  }
 }
}

 


</script>







<script>
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");

</script>

方法二

 




ip输入框

<script language="javascript">
window.onload = function(){
 var p = new ipFields("ip")
 p.init();
 //p.setValue("192.168.1.1"); 如果有初始值可以这么写
 //alert(p.getValue());
 
 document.getElementById("btn1").onclick = function(){
  p.setValue(document.getElementById("set").value);
 }
 
 document.getElementById("btn2").onclick = function(){
  alert(p.getValue());
 }
 
 
}
 
</script>




 
  .
 
  .
 
  .
 
     







 
 
 


<script language="javascript">
/**
* Class:ip输入框
*/
function ipFields(id){
 this.id = typeof(id)=="string"?document.getElementById(id):id;
 this.init=function(def){
  var _this = this;
  var chk=0;
  for(var i=0;i    var t = this.id.childNodes[i];
   var focusKey = new Array(0,9,110,32,13,0);
   if(t.nodeName.toLowerCase() == "input"){
    //onkeydown
    t.onkeydown = function(e){
     e = e||window.event;
     if(focusKey.join("-").indexOf("-"+e.keyCode+"-")>-1){
      _this.toFocus(this);
      return false;
     }
    }
    //onkeyup
    t.onkeyup = function(e){
     e = e||window.event;
     if(this.value>255){
      alert(this.value+"不是一个合法的值。");
      this.value = "";
     }
     if(this.value.length==3 && focusKey.join("-").indexOf("-"+e.keyCode+"-")<0 ){_this.toFocus(this);}
     this.value = this.value.replace(/[^d]/g,"");
    }
    //onfocus
    t.onfocus = function(e){
     if(this.value.length==3)this.select();
    }
    chk++;
   }else{
    this.id.removeChild(t);
    i--;
   }
  }
  if(chk!=4)alert("IP输入框配置错误.");
  if(def)this.setValue(def);
 }
 //聚焦到下一个文本框
 this.toFocus = function(obj){
  if(obj.nextSibling){
   obj.nextSibling.focus();
  }else{
   this.id.firstChild.focus();
  }
 }
 //取值
 this.getValue = function(){
  var a = new Array();
  for(var i=0;i<4;i++){
   this.id.childNodes[i].value?a.push(this.id.childNodes[i].value):a.push(0);
  }
  return a.join(".");
 }
 //设置值
 this.setValue = function(val){
  val = (val+".0.0.0.0").split(".");
  for(var i=0;i<4;i++){
   this.id.childNodes[i].value = val[i];
  }
 }
 
}
 
 
  </script>

本文来源:http://www.gdgbn.com/wangyezhizuo/22294/