最近遇到一些这样的需求:实现一种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. [Umbraco] 自定义DataType中Data Editor Setting Type

    上一篇介绍了在定义Document Type中的属性时用到的Data Type,当使用dropdown list如何调用外部数据源,可以根据提供的数据连接字符串,sql语句就能实现你想要显示的数据. ...

  2. odoo开发笔记:抛出警告的方式

    上边rase 加3种写法,都能实现,跑出警告的功能.

  3. Centos Android开发环境配置-Android Tools -android list sdk --extended --all

    Centos Android开发环境配置-Android Tools -android  list sdk --extended --all 安装完Android Tools后执行 android   ...

  4. tensorflow学习总结之reduce_sum函数

    tensorflow里面集成了许多基于统计的数学函数,类似于reduce_sum,reduce_mean,reduce_min,reduce_max,等,根据字面意思分别是求和,求平均,求最大,求最小 ...

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

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

  6. 解析Service之你需要了解的一些东东

    何为Service Service,俗名服务.在Android系统中,Service与Activity就像一个妈生的,不仅长得像,而且行为(生命周期)也有一些类似.对于Activity来说大家肯定不会 ...

  7. 你真的理解编码吗?unicode,utf8,utf16详解

    背景 前两天在网上看到一篇关于编码的讨论,仔细学习了一下unicode,utf8,utf16的定义.这篇博客旨在让读者真正理解他们是什么. 什么是编码 在阅读本文之前建议读者先去阅读这篇文章:http ...

  8. 软件架构设计学习总结(4):大数据架构hadoop

    摘要:Admaster数据挖掘总监 随着互联网.移动互联网和物联网的发展,谁也无法否认,我们已经切实地迎来了一个海量数据的时代,数据调查公司IDC预计2011年的数据总量将达到1.8万亿GB,对这些海 ...

  9. C# DateTime 转 JavaScript Date

    @{ var minTicks = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc).Ticks; var nowTicks = DateTime ...

  10. Spark2.1.0——深入理解事件总线

    Spark2.1.0——深入理解事件总线 概览 Spark程序在运行的过程中,Driver端的很多功能都依赖于事件的传递和处理,而事件总线在这中间发挥着至关重要的纽带作用.事件总线通过异步线程,提高了 ...