【www.gdgbn.com--js教程】
<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.readOnly=b;
}
document.getElementById(this.id).className=bEnable?IpV4Box.EnabledClassName:IpV4Box.DisabledClassName
},
toString:function(){
return "
/>.
/>.
/>.
";
},
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>
<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>
方法二
<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>
.
.
.
<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
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>