js限制只能输入ip文本框代码

<html>
<head>
<script >

function IpV4Box(id,pNode){
 this.id = id;
 this.onChange=new Function();
 this.onEnterKey=new Function();
 this.disabled=false;
 
 IpV4Box.all[id]=this;
 if(pNode)
 {
  if(typeof pNode=="string")
  {
   pNode=document.getElementById(pNode);
  }
  pNode.innerHTML=this.toString();
 }
}
IpV4Box.all={};

IpV4Box.EnabledClassName="ipInput oneInput";//启用时样式
IpV4Box.DisabledClassName="ipInput oneInputDisabled";// 禁用时样式

IpV4Box.prototype={
 /**
 * 激活IP框
 * @param {number} index 1-4　指定激活的位置
 */
 focus:function(index){
  if(!index)
   index=1;
  document.getElementById(this.id+"_"+index).focus();
 },
 setEnable:function(bEnable){
  var b=!bEnable;
  this.disabled=!bEnable;
  var boxes=document.getElementById(this.id).getElementsByTagName("input");
  for(var i=0;i<boxes.length;i++)
  {
   boxes.readOnly=b;
  }
  document.getElementById(this.id).className=bEnable?IpV4Box.EnabledClassName:IpV4Box.DisabledClassName
 },
 toString:function(){
  return '<span  id="'+this.id+'" class="' + IpV4Box.EnabledClassName + '"  >
   <input onkeypress="IpV4Box.evt.keypress(this,event)" onkeydown="IpV4Box.evt.keydown(this,event)" onfocus="IpV4Box.evt.focus(this,event)" onpaste="IpV4Box.evt.change(this,event);" oninput="IpV4Box.evt.change(this,event);" onchange="IpV4Box.evt.change(this,event);"  type="text" size=3  id="'+this.id+'_1" maxlength=3
   />.<input onkeypress="IpV4Box.evt.keypress(this,event)" onkeydown="IpV4Box.evt.keydown(this,event)" onfocus="IpV4Box.evt.focus(this,event)" onpaste="IpV4Box.evt.change(this,event);" oninput="IpV4Box.evt.change(this,event);" onchange="IpV4Box.evt.change(this,event);"  type="text" size=3  id="'+this.id+'_2" maxlength=3
   />.<input onkeypress="IpV4Box.evt.keypress(this,event)" onkeydown="IpV4Box.evt.keydown(this,event)" onfocus="IpV4Box.evt.focus(this,event)" onpaste="IpV4Box.evt.change(this,event);" oninput="IpV4Box.evt.change(this,event);" onchange="IpV4Box.evt.change(this,event);"  type="text" size=3  id="'+this.id+'_3" maxlength=3
   />.<input onkeypress="IpV4Box.evt.keypress(this,event)" onkeydown="IpV4Box.evt.keydown(this,event)" onfocus="IpV4Box.evt.focus(this,event)" onpaste="IpV4Box.evt.change(this,event);" oninput="IpV4Box.evt.change(this,event);" onchange="IpV4Box.evt.change(this,event);"  type="text" size=3  id="'+this.id+'_4" maxlength=3/>
  </span>';
 },
 getValue:function(){
  var ip=[
   document.getElementById(this.id+"_1").value,
   document.getElementById(this.id+"_2").value,
   document.getElementById(this.id+"_3").value,
   document.getElementById(this.id+"_4").value
  ];
  return ip.join(".");
  
 },
 setValue:function(ip){
  ip=ip.replace(/[^d.]/g,"");
  if(ip=="")
  {
   ip="..."
  }
  ip=ip.split(".");
  document.getElementById(this.id+"_1").value = ip[0];
  document.getElementById(this.id+"_2").value = ip[1];
  document.getElementById(this.id+"_3").value = ip[2];
  document.getElementById(this.id+"_4").value = ip[3];
 }
}

IpV4Box.evt={
 focus:function(obj,evt){
  obj.select();
 },
 change:function(obj,evt){
  var v=parseInt(obj.value);
  if( v >= 0 && v <= 255 )
  {
   if(v != obj.value)
    obj.value=v;
  
  }
  else{
   obj.value="";
  }
 
  IpV4Box.all[ obj.id.replace(/_d$/,"") ].onChange();
 },
 keypress:function(obj,evt){
  var key=evt.charCode||evt.keyCode;
  var pos=IpV4Box.evt.getSelection(obj);
  var value=obj.value;
  var c=String.fromCharCode(key);
  if(key>=48 && key<=57)
  {
   value=""+value.substring(0,pos.start)
    + c + value.substring(pos.end,value.length);
   
   if(parseInt(value)<255)
   {
      var id=obj.id;
    /(.*)_(d)$/.test(id);
    var index=RegExp.$2;
    IP_id=RegExp.$1;
    if(parseInt(value)>=100)
    {
     if(parseInt(index)<4)
     {
      id=id.replace(/(d)$/,parseInt(index)+1 );
      setTimeout("document.getElementById('"+id+"').focus();"+
       "document.getElementById('"+id+"').select();",200);
     }
    }
    setTimeout("IpV4Box.all['"+IP_id+"'].onChange()",0);
    return true;
   }
   else
   {
    
    if(evt.preventDefault)
     evt.preventDefault();
    evt.returnValue=false;
    return false;
   }
  }
  else{

   if(evt.preventDefault)
    evt.preventDefault();
   evt.returnValue=false;
  }
 },
 keydown:function(obj,evt){
  var key=evt.charCode||evt.keyCode;
  var pos=IpV4Box.evt.getSelection(obj);
  var value=obj.value;
  var c=String.fromCharCode(key);
    var id=obj.id;
  /^(.*)_(d)$/.test(id);
  var index=RegExp.$2;
  var Ip_Id=RegExp.$1;
  switch(key)
  {
    case 13://回车
   IpV4Box.all[Ip_Id].onEnterKey(); 
   break;  

    case 110://.小键盘
    case 190://.主键盘
   if(index<4)
   {

    id=id.replace(/(d)$/,parseInt(index)+1 );
    document.getElementById(id).focus();
    document.getElementById(id).select();
   }
   break;

    case 38://up
     
   value=!isNaN(parseInt(value))?parseInt(value):"";
     if(value=="")
    value=0;
    if(value<255)
   {
    obj.value=value+1;
   }
   else
    obj.value=0;
   
     break;
    case 40://down
   value=!isNaN(parseInt(value))?parseInt(value):"";
   
     if(value=="")
    value=255;
    if(value>0)
   {
    obj.value=value-1;
   };
     break;
    case 8://backspace
   if(pos.start>0)
    return;
   
    case 37://left
     if(pos.end==0 && index>1)
   {
    id=id.replace(/(d)$/,parseInt(index)-1 );
    document.getElementById(id).focus();
    document.getElementById(id).select();
   }
     break;
    case 39://right
     if(pos.start==value.length && index<4)
   {
    id=id.replace(/(d)$/,parseInt(index)+1 );
    document.getElementById(id).focus();
    document.getElementById(id).select();
   }
     break;
  

  }

 

 },
 //获取选区位置
 getSelection:function(oInput){
  var T=this;
  if(oInput.createTextRange){
   var s=document.selection.createRange().duplicate();
   s.moveStart("character",-oInput.value.length);
   var p1=s.text.length;
   
   
   var s=document.selection.createRange().duplicate();
   s.moveEnd("character",oInput.value.length);
   var p2=oInput.value.lastIndexOf(s.text);
   if(s.text=="")p2=oInput.value.length;
   
   
   return {start:p2,end:p1};
   
  }else {
   return {start:oInput.selectionStart,end:oInput.selectionEnd};
   
  }
 }
}

 

</script>
<style type="text/css">
/*IP 输入框*/
.ipInput{
 border:1px solid #ccc;
 font-size:12px;
}
.ipInput input{
 border:0px solid #ccc;
 font-size:12px;
 height:16px;
 width:24px;
 background:transparent;
 text-align:center;
}
</style>
</head>
<body>
<span id="span1"></span>
<input type="button" value="ip1.getValue" onclick="alert(ip1.getValue())" />
<p>
<span id="span2"></span>
<script>
var ip1=new IpV4Box("ip1");
document.getElementById("span1").innerHTML=ip1;
ip1.focus(1);//激活输入框的第一部分
ip1.onEnterKey=function(){
  alert("ip1 EnterKey");
}
//每成功输入一个字每都会激发onChange事件
ip1.onChange=function(){
  window.status="ip1 新ip:"+(this.getValue());
}

ip1.setValue("195.2.199.170");
var ip2=new IpV4Box("ip2" , "span2");

</script>
</body>
</html>

方法二

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ip输入框</title>
<style type="text/css">
<!--
body,td,th {
 font-size: 12px;
}
.ipFields{border:1px solid #999999;overflow:hidden;}
.ipFields input{width:35px;background:url(http://bbs./attachment.php?aid=8778&noupdate=yes) no-repeat right bottom;border:0px;font-family:Arial;font-weight:bold;text-align:center;}
.ipFields .nobg{background:none;}
-->
</style>
<script language="javascript">
window.onload = function(){
 var p = new ipFields("ip")
 p.init();
 //p.setValue("192.168.1.1"); 如果有初始值可以这么写
 //alert(p.getValue());
 
 document.getElementById('btn1').onclick = function(){
  p.setValue(document.getElementById('set').value);
 }
 
 document.getElementById('btn2').onclick = function(){
  alert(p.getValue());
 }
 
 
}
 
</script>

</head>
<body>
<p><span id="ip" class="ipFields">
  <input name="ip1" type="text" id="ip1" size="5" maxlength="3" />
  .
  <input name="ip2" type="text" id="ip2" size="5" maxlength="3" />
  .
  <input name="ip3" type="text" id="ip3" size="5" maxlength="3" />
  .
  <input name="ip4" type="text" id="ip4" size="5" maxlength="3" class="nobg" />
  </span>    </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>
  <input name="set" type="text" id="set" value="192.168.1.0" size="15" />
  <input type="button" name="btn1" id="btn1" value="设置值"/>
  <input type="button" name="btn2" id="btn2" value="取值" />
</p>
<script language="javascript">
/**
* Class:ip输入框
*/
function ipFields(id){
 this.id = typeof(id)=='string'?document.getElementById(id):id;
 this.init=function(def){
  var _this = this;
  var chk=0;
  for(var i=0;i<this.id.childNodes.length;i++){
   var t = this.id.childNodes[i];
   var focusKey = new Array(0,9,110,32,13,0);
   if(t.nodeName.toLowerCase() == "input"){
    //onkeydown
    t.onkeydown = function(e){
     e = e||window.event;
     if(focusKey.join('-').indexOf('-'+e.keyCode+'-')>-1){
      _this.toFocus(this);
      return false;
     }
    }
    //onkeyup
    t.onkeyup = function(e){
     e = e||window.event;
     if(this.value>255){
      alert(this.value+"不是一个合法的值。");
      this.value = "";
     }
     if(this.value.length==3 && focusKey.join('-').indexOf('-'+e.keyCode+'-')<0 ){_this.toFocus(this);}
     this.value = this.value.replace(/[^d]/g,"");
    }
    //onfocus
    t.onfocus = function(e){
     if(this.value.length==3)this.select();
    }
    chk++;
   }else{
    this.id.removeChild(t);
    i--;
   }
  }
  if(chk!=4)alert("IP输入框配置错误.");
  if(def)this.setValue(def);
 }
 //聚焦到下一个文本框
 this.toFocus = function(obj){
  if(obj.nextSibling){
   obj.nextSibling.focus();
  }else{
   this.id.firstChild.focus();
  }
 }
 //取值
 this.getValue = function(){
  var a = new Array();
  for(var i=0;i<4;i++){
   this.id.childNodes[i].value?a.push(this.id.childNodes[i].value):a.push(0);
  }
  return a.join(".");
 }
 //设置值
 this.setValue = function(val){
  val = (val+".0.0.0.0").split(".");
  for(var i=0;i<4;i++){
   this.id.childNodes[i].value = val[i];
  }
 }
 
}
 
 
  </script>
</body>
</html>

时间： 2024-07-31 17:47:42

js限制只能输入ip文本框代码的相关文章

tipswindow不能取到重新输入的文本框的值

问题描述 tipswindow不能取到重新输入的文本框的值 引入了 tw弹出层的插件 层里面代码 我赋1个值到文本框 $().val; 这样的方式赋值不上 这个值是数据库取出来的. 但是用了$().attr("value",参数) 可以赋值上去 现在问题就出现了 我文本框赋值上去了 可是我在文本框里面重新输入的值 不管是.val() 还是attr("value") 都取不到我输入的值 只能取到我开始赋的值 我怀疑是弹出层重新加载了 可是我找不到解决的方法 有高手能亲

限制只能输入数字的实现代码_javascript技巧

当我们在一些网站注册账号.填写信息是,不小心将电话号码填写成汉字或其他英文字母了,这显然是不正确的.为了帮助用户更好地纠正输入时的错误,在表单中填写信息时,需要限制手机号.邮编.电话号码这类文本框不能输入其他字符,只能是数字. 通过使用正则匹配输入的时候只是数字: var numRegex = /\D/g再通过JavaScript的 onblur 事件: 定义和用法onblur 事件会在对象失去焦点时发生. Onblur 经常用于Javascript验证代码,一般用于表单输入框 语法 HTML

js实现鼠标点击文本框自动选中内容的方法_javascript技巧

本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-click

javascript-请教一下已知验证方法，怎么用JavaScript实现表单的验证，并将提示信息输入到文本框后

问题描述 请教一下已知验证方法,怎么用JavaScript实现表单的验证,并将提示信息输入到文本框后 <script type="text/javascript"> //检查全部表单元素是否为空 function checkBlank(Form) { var v=true; for(i=0;i<Form.length;i++){ if(Form.elements[i].value==""){ alert(Form.elements[i].title

JS模仿编辑器实时改变文本框宽度和高度大小的方法_javascript技巧

本文实例讲述了JS模仿编辑器实时改变文本框宽度和高度大小的方法.分享给大家供大家参考.具体如下: 这里演示JS模仿编辑器中实时改变文本框大小,包括宽度和高度的方法,在一些在线编辑器,比如eWebEditor中,就有一个功能,让文本框不断的增大或减小,以适应页面的大小,这个功能是如何实现的呢?请您参考一下这个程序,相信你会从中获益. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-editor-cha-width-height-codes/

JS实现自适应高度表单文本框的方法_javascript技巧

本文实例讲述了JS实现自适应高度表单文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

js input只能输入数字(兼容IE和Firefox)正则

文章收藏了一款关于js input只能输入数字(兼容ie和firefox)正则,前面二款是网上找的但好像不怎么支持ie,firefox正则,后来一款是超漂亮的兼容多浏览的正则方法哈. 只能输入数字 <input onkeyup="value="/value.replace(/["^d]/g,'') "onbeforepaste="clipboarddata.setdata('text',clipboarddata.getdata('text').re

jquery ui -jquery-ui.min.js怎么在页面让文本框显示日历

问题描述 jquery-ui.min.js怎么在页面让文本框显示日历 我需要在insertask.jsp页面上添加一个文本框,需要做成可选择日历,不知道怎么信用jquery-ui-min.js,求大神们帮助, 解决方案 推荐你用My97DatePicker 也是一个js库 方便好用 近几年我的项目中都用的它 解决方案二: http://www.jb51.net/article/50322.htm 解决方案三: 解决方案四: jquery.maxlength-min.jsjquery-1.6.3.

js限制只能输入数字

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="conte