最近遇到一些这样的需求：实现一种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.      function setCursor(obj,num)
  28.      {
  29.          range=obj.createTextRange();
  30.          range.collapse(true);
  31.          range.moveStart('character',num);
  32.          range.select();
  33.      }
  34.  
  35.      function keyDownEvent(obj)
  36.      {
  37.          code=event.keyCode;
  38.          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))
  39.              event.returnValue=false;
  40.          if(code==13)
  41.              event.keyCode=9;
  42.          if(code==110||code==190)
  43.              if(obj.value)
  44.                  event.keyCode=9;
  45.              else
  46.                  event.returnValue=false;
  47.      }
  48.  
  49.      function keyUpEvent(obj0,obj1,obj2)
  50.      {
  51.          if (obj1.value > 255)
  52.          {
  53.              alert("填写范围必须在 0 - 255间");
  54.              obj1.value = obj1.value.substring(0, obj1.value.length - 1);
  55.              return;
  56.          }
  57.          code=event.keyCode
  58.  
  59.          if(obj1.value.length>=3&&code!=37&&code!=39&&code!=16&&code!=9&&code!=13)
  60.              obj2.focus();
  61.  
  62.          if(code == 32)
  63.              obj2.focus();
  64.  
  65.          if(code == 8 && obj1.value.length == 0)
  66.          {
  67.              obj0.focus();
  68.              setCursor(obj0,obj0.value.length);
  69.          }
  70.  
  71.          if (code == 37 && (getPos(obj1) == 0))
  72.          {
  73.              obj0.focus();
  74.              setCursor(obj0,obj0.value.length);
  75.          }
  76.          if (code == 39 && (getPos(obj1) == obj1.value.length))
  77.          {
  78.              obj2.focus();
  79.          }
  80.      }
  81.      function keyUpEventForIp4(obj0,obj)
  82.      {
  83.          if (obj.value > 255)
  84.          {
  85.              alert("填写范围必须在 0 - 255间");
  86.              obj.value = obj.value.substring(0, obj.value.length - 1);
  87.              return;
  88.          }
  89.          if(code == 8 && obj.value.length == 0)
  90.          {
  91.              obj0.focus();
  92.              setCursor(obj0,obj0.value.length);
  93.          }
  94.          if (code == 37 && (getPos(obj) == 0))
  95.          {
  96.              obj0.focus();
  97.              setCursor(obj0,obj0.value.length);
  98.          }
  99.  
  100.      }
  101.      function getipvalue(obj1,obj2,obj3,obj4,obj)
  102.      {
  103.          obj.value = obj1.value + "." + obj2.value + "." + obj3.value + "." + obj4.value;
  104.          alert(obj.value);
  105.      }
  106.  </script>
  107.  
  108.  <form>
  109.      <div class=all_input>
  110.          <input name=ip1 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(ip1,ip1,ip2)>?<input
  111.              name=ip2 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(ip1,ip2,ip3)>?<input
  112.              name=ip3 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEvent(ip2,ip3,ip4)>?<input
  113.              name=ip4 class=ip_input maxlength=3 onkeydown=keyDownEvent(this) onkeyup=keyUpEventForIp4(ip3,ip4)>
  114.          <input name = ipvalue TYPE="hidden">
  115.  
  116.      </div>
  117.      <INPUT TYPE="button" value = "getvalue" onmouseup=getipvalue(ip1,ip2,ip3,ip4,ipvalue)>
  118.  </form>
  119.  </body>
  120.  </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. .NET跨平台实践：再谈用C#开发Linux守护进程 — 完整篇

    Linux守护进程是Linux的后台服务进程,相当于Windows服务,对于为Linux开发服务程序的朋友来说,Linux守护进程相关技术是必不可少的,因为这个技术不仅仅是为了开发守护进程,还可以拓展 ...

  2. vue使用代理实现开发阶段跨域

    在config/index.js找到 proxyTable对象,添加键值对即可. "/api":{ target:"http://192.168.1.1", c ...

  3. Vagrant安装Docker

    ======方法1=========== 一.vagrant安装centos 1.1 什么是vagrant: Vagrant是一个基于Ruby的工具,用于创建和部署虚拟化开发环境.它 使用Oracle ...

  4. mysql索引总结(4)-MySQL索引失效的几种情况

    mysql索引总结(1)-mysql 索引类型以及创建 mysql索引总结(2)-MySQL聚簇索引和非聚簇索引 mysql索引总结(3)-MySQL聚簇索引和非聚簇索引 mysql索引总结(4)-M ...

  5. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  6. webpack版本兼容性问题错误总结，耽误半天学习

    今天看了掘金上的一篇文章(https://juejin.im/post/5bf61082f265da616a474b5c#comment),想搞搞webpack拆分js. 开搞 文章中用了webpac ...

  7. C# Hadoop学习笔记（二）—架构原理

    一,架构   二.名词解释 (一)NameNode(简称NN),Hadoop的主节点,负责侦听节点是否活跃,对外开放接口等.在未来的大数据处理过程中,由于访问量和节点数量的不断增多,需要该节点的处理能 ...

  8. Android - 系统开机你知道多少？

    https://github.com/zhantong/interview/blob/master/Android/Android.md#38-android%E7%B3%BB%E7%BB%9F%E5 ...

  9. RocketMQ 概述

    Rocket 火箭 MQ的作用:同步转异步(异步解耦). 难点:如何确保消息一定被消费,而且仅消费一次. 1.消息架构:生产者.服务器.消费者.路由发现. 2.消息顺序:严格按照消息到达服务器的顺序进 ...

  10. Three.js开发指南---创建，加载高级网格和几何体（第八章）

    本章的主要内容: 一, 通过Three.js自带的功能来组合和合并已有的几何体,创建出新的几何体 二, 从外部资源中加载网格和几何体 1 前面的章节中,我们学习到,一个几何体创建的网格,想使用多个材质 ...