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.51js.com/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>
补充：网页制作,js教程 
