JavaScript实现IP地址的输入框方式

最近遇到一些这样的需求：实现一种IP地址的输入方式，就是输入3个字符或自动跳到下一个输入框内，删除的时候，一个输入框没有了字符，自动跳回上一个输入框。看到这里，相信大家都有一些想法了，没错，这种方法就是4个输入框！！！！通过获取字符的长度和焦点来实现，由此可以推广Mac地址也可以这样实现，就是6个输入框而已了。

效果图如下

代码如下

  1 <html>
  2 <head>
  3     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4     <title>JScript实现的IP地址输入框</title>
  5 </head>
  6 <body>
  7 <style type=textcss>
  8     .ip_input  { width:20px; height:16px; font:normal 12px 宋体; color:#000000; border:0px; text-align:center; position:relative; top:1px; }
  9     .all_input  { width:112; height:20px; font:normal 8px 宋体; color:#000000; border:1px solid #000000; text-align:center; }
 10 </style>
 11 
 12 <script language=javascript>
 13 
 14     function getPos(obj)
 15     {
 16         obj.focus();
 17         var workRange=document.selection.createRange();
 18         obj.select();
 19         var allRange=document.selection.createRange();
 20         workRange.setEndPoint("StartToStart",allRange);
 21         var len=workRange.text.length;
 22         workRange.collapse(false);
 23         workRange.select();
 24         return len;
 25     }
 26 
 27 
 28     function setCursor(obj,num)
 29     {
 30         range=obj.createTextRange();
 31         range.collapse(true);
 32         range.moveStart('character',num);
 33         range.select();
 34     }
 35 
 36     function keyDownEvent(obj)
 37     {
 38         code=event.keyCode;
 39         if(!((code>=48&&code<=57)||(code>=96&&code<=105)||code==190||code==110||code==13||code==9||code==39||code==8||code==46||code==99||    code==37))
 40             event.returnValue=false;
 41         if(code==13)
 42             event.keyCode=9;
 43         if(code==110||code==190)
 44             if(obj.value)
 45                 event.keyCode=9;
 46             else
 47                 event.returnValue=false;
 48     }
 49 
 50     function keyUpEvent(obj0,obj1,obj2)
 51     {
 52         if (obj1.value > 255)
 53         {
 54             alert("填写范围必须在 0 - 255间");
 55             obj1.value = obj1.value.substring(0, obj1.value.length - 1);
 56             return;
 57         }
 58         code=event.keyCode
 59 
 60         if(obj1.value.length>=3&&code!=37&&code!=39&&code!=16&&code!=9&&code!=13)
 61             obj2.focus();
 62 
 63         if(code == 32)
 64             obj2.focus();
 65 
 66         if(code == 8 && obj1.value.length == 0)
 67         {
 68             obj0.focus();
 69             setCursor(obj0,obj0.value.length);
 70         }
 71 
 72         if (code == 37 && (getPos(obj1) == 0))
 73         {
 74             obj0.focus();
 75             setCursor(obj0,obj0.value.length);
 76         }
 77         if (code == 39 && (getPos(obj1) == obj1.value.length))
 78         {
 79             obj2.focus();
 80         }
 81     }
 82     function keyUpEventForIp4(obj0,obj)
 83     {
 84         if (obj.value > 255)
 85         {
 86             alert("填写范围必须在 0 - 255间");
 87             obj.value = obj.value.substring(0, obj.value.length - 1);
 88             return;
 89         }
 90         if(code == 8 && obj.value.length == 0)
 91         {
 92             obj0.focus();
 93             setCursor(obj0,obj0.value.length);
 94         }
 95         if (code == 37 && (getPos(obj) == 0))
 96         {
 97             obj0.focus();
 98             setCursor(obj0,obj0.value.length);
 99         }
100 
101     }
102     function getipvalue(obj1,obj2,obj3,obj4,obj)
103     {
104         obj.value = obj1.value + "." + obj2.value + "." + obj3.value + "." + obj4.value;
105         alert(obj.value);
106     }
107 </script>
108 
109 <form>
110     <div class=all_input>
111         <input name=ip1 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(ip1,ip1,ip2)>?<input
112             name=ip2 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(ip1,ip2,ip3)>?<input
113             name=ip3 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(ip2,ip3,ip4)>?<input
114             name=ip4 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEventForIp4(ip3,ip4)>
115         <input name = ipvalue TYPE="hidden">
116 
117     </div>
118     <INPUT TYPE="button" value = "getvalue" onmouseup=getipvalue(ip1,ip2,ip3,ip4,ipvalue)>
119 </form>
120 </body>
121 </html>

View Code

　　其实，主要是运用了focus，keyup，keydown的相关知识而已。