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

效果图如下

代码如下

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

     <title>JScript实现的IP地址输入框</title>

 </head>

 <body>

 <style type=textcss>

     .ip_input  { width:20px; height:16px; font:normal 12px 宋体; color:#000000; border:0px; text-align:center; position:relative; top:1px; }

     .all_input  { width:112; height:20px; font:normal 8px 宋体; color:#000000; border:1px solid #000000; text-align:center; }

 </style>

 <script language=javascript>

     function getPos(obj)

     {

         obj.focus();

         var workRange=document.selection.createRange();

         obj.select();

         var allRange=document.selection.createRange();

         workRange.setEndPoint("StartToStart",allRange);

         var len=workRange.text.length;

         workRange.collapse(false);

         workRange.select();

         return len;

     }

     function setCursor(obj,num)

     {

         range=obj.createTextRange();

         range.collapse(true);

         range.moveStart('character',num);

         range.select();

     }

     function keyDownEvent(obj)

     {

         code=event.keyCode;

         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))

             event.returnValue=false;

         if(code==13)

             event.keyCode=9;

         if(code==110||code==190)

             if(obj.value)

                 event.keyCode=9;

             else

                 event.returnValue=false;

     }

     function keyUpEvent(obj0,obj1,obj2)

     {

         if (obj1.value > 255)

         {

             alert("填写范围必须在 0 - 255间");

             obj1.value = obj1.value.substring(0, obj1.value.length - 1);

             return;

         }

         code=event.keyCode

         if(obj1.value.length>=3&&code!=37&&code!=39&&code!=16&&code!=9&&code!=13)

             obj2.focus();

         if(code == 32)

             obj2.focus();

         if(code == 8 && obj1.value.length == 0)

         {

             obj0.focus();

             setCursor(obj0,obj0.value.length);

         }

         if (code == 37 && (getPos(obj1) == 0))

         {

             obj0.focus();

             setCursor(obj0,obj0.value.length);

         }

         if (code == 39 && (getPos(obj1) == obj1.value.length))

         {

             obj2.focus();

         }

     }

     function keyUpEventForIp4(obj0,obj)

     {

         if (obj.value > 255)

         {

             alert("填写范围必须在 0 - 255间");

             obj.value = obj.value.substring(0, obj.value.length - 1);

             return;

         }

         if(code == 8 && obj.value.length == 0)

         {

             obj0.focus();

             setCursor(obj0,obj0.value.length);

         }

         if (code == 37 && (getPos(obj) == 0))

         {

             obj0.focus();

             setCursor(obj0,obj0.value.length);

         }

     }

     function getipvalue(obj1,obj2,obj3,obj4,obj)

     {

         obj.value = obj1.value + "." + obj2.value + "." + obj3.value + "." + obj4.value;

         alert(obj.value);

     }

 </script>

 <form>

     <div class=all_input>

         <input name=ip1 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(ip1,ip1,ip2)>?<input

             name=ip2 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(ip1,ip2,ip3)>?<input

             name=ip3 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(ip2,ip3,ip4)>?<input

             name=ip4 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEventForIp4(ip3,ip4)>

         <input name = ipvalue TYPE="hidden">

     </div>

     <INPUT TYPE="button" value = "getvalue" onmouseup=getipvalue(ip1,ip2,ip3,ip4,ipvalue)>

 </form>

 </body>

 </html>

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

JavaScript实现IP地址的输入框方式的更多相关文章

  1. JavaScript按IP地址排序

    JavaScript按IP地址列表排序,主要思路就是分割每个点号部分,然后ip1和ip2分别对不够三位数的进行补0操作,然后转换为数字类型进行一一比较. 上代码: 正序: var arr=[ {ip: ...

  2. java struts2入门学习实例－－将客户端IP地址和访问方式输出到浏览器

    实例1:实现客户端IP地址和访问方式输出到浏览器. IpAction.java package com.amos.web.action; import javax.servlet.http.HttpS ...

  3. javascript把IP地址转为数值几种方案，来挑战一下效率吧

    先看看什么是IP地址: IP地址是一个32位的二进制数,通常被分割为4个“8位二进制数”(也就是4个字节).IP地址通常用“点分十进制”表示成(a.b.c.d)的形式,其中,a,b,c,d都是0~25 ...

  4. [Qt] IP地址输入框实现

    封装了一个ip地址的输入框.网络上下载了份代码,找不到哪里的了.经过修改之后,尽力让它的行为和windows的IP地址输入框的行为看起来像些.代码如下: //ipaddredit.h #ifndef ...

  5. js获取IP地址方法总结_转

    js代码获取IP地址的方法,如何在js中取得客户端的IP地址.原文地址:js获取IP地址的三种方法 http://www.jbxue.com/article/11338.html 1,js取得IP地址 ...

  6. GitLab服务器IP地址设置

    最近使用GitLab 搭建了Git的私有仓库,但是发现私有仓库的地址居然是localhost,不是本机的IP地址,最后百度了一下,找了很久才找到,特此记录一下. 首先说明一下,我linux虚拟机的IP ...

  7. 浅谈TCP IP协议栈(二)IP地址

    上一节大致了解TCP/IP协议栈是个啥东西,依旧是雾里看花的状态,有很多时候学一门新知识时,开头总是很急躁,无从下手,刚学会一点儿,却发现连点皮毛都不算,成就感太低,所以任何时候学习最重要的是要在合适 ...

  8. js获取IP地址多种方法实例教程

    js获取IP地址方法总结   js代码获取IP地址的方法,如何在js中取得客户端的IP地址.原文地址:js获取IP地址的三种方法 http://www.jbxue.com/article/11338. ...

  9. js获取IP地址方法总结

    js代码获取IP地址的方法,如何在js中取得客户端的IP地址.原文地址:js获取IP地址的三种方法 http://www.jbxue.com/article/11338.html 1,js取得IP地址 ...

随机推荐

  1. 课程一(Neural Networks and Deep Learning)，第四周（Deep Neural Networks）——2.Programming Assignments: Building your Deep Neural Network: Step by Step

    Building your Deep Neural Network: Step by Step Welcome to your third programming exercise of the de ...

  2. ElasticSearch入门3: Spring Boot集成ElasticSearch

    第一步:创建项目elasticsearch 编写pom文件 <?xml version="1.0" encoding="UTF-8"?> <p ...

  3. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

  4. js便签笔记（5）——Dean Edwards大牛的跨浏览器AddEvent()设计（不知道是不是jQuery事件系统的原型）

    1. 前言: 在看Aaron的jquery源码解读时候,看到事件系统那块,作者提到了Dean Edwards的添加事件的设计,于是就点进去看了看.首先让我吃惊的是,代码非常少,寥寥几十行,非常简单.于 ...

  5. 自我总结 (三) --(Java Web学习)

    自我完善的过程就是在不断的自我总结不断的改进. 在前的近半个月里,我们经过了考试,也开始了java web的项目. 先看看这次的考试.考完之后我就觉得有点不对劲的,结果 结果真的是一塌糊涂.上周五的时 ...

  6. （转）注解用法详解—@@SuppressWarnings

    一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...

  7. POJ 2262 Goldbach's Conjecture （打表）

    题目链接: https://cn.vjudge.net/problem/POJ-2262 题目描述: In 1742, Christian Goldbach, a German amateur mat ...

  8. .1-浅析express源码之入口文件

    鸽了鸽了,webpack源码大垃圾,看了那么久,感觉自己越来越渣……还是换个口味,node了解一下? 尝试从express框架源码入手,学习一下node的http模块相关的知识. 入口文件 先从框架的 ...

  9. 30分钟搞定后台登录界面（103个后台PSD源文件、素材网站）

    去年八月时要做一个OA系统为了后台界面而烦恼,后来写了一篇博客(<后台管理UI的选择>)介绍了选择过程与常用后台UI,令我想不到的时竟然有许多开发者与我一样都为这个事情而花费不少时间,最后 ...

  10. 【模板】 ST表

    某dalao的代码 void ST(int n) { ; i <= n; i++) dp[i][] = A[i]; ; ( << j) <= n; j++) { ; i + ( ...