JavaScript实现IP地址的输入框方式
2018-06-24 01:57:42来源:未知 阅读 ()
最近遇到一些这样的需求:实现一种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>
其实,主要是运用了focus,keyup,keydown的相关知识而已。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css基础
下一篇:css3动画之圆形运动轨迹
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- CSS3 2020-06-05
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- Vue 结合html2canvas和jsPDF实现html页面转pdf 2020-04-25
- 10.布局:两栏和主区域在后的三栏布局,实现侧边栏和主区域伪 2020-04-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash