JavaScript写的IP 地址输入框

来源：互联网发布：java 空格逆序输出编辑：程序博客网时间：2024/05/04 07:32

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>IP 地址输入框 v1.0</title>
<script language="javascript">
function outStr(){
if(document.all.ip1.value>0 && document.all.ip2.value>0 && document.all.ip3.value>0 && document.all.ip4.value>0){
  alert("你输入的IP地址为：" + document.all.ip1.value + "." + document.all.ip2.value + "." + document.all.ip3.value + "." + document.all.ip4.value);
}//end if
}//end
function moveRight(obj){
id = parseInt(obj.name.substr(2,1))
if(id<4){
  eval("document.all.ip" + (id +1) + ".focus()");
}else{
  outStr();
}//end if
}
function moveLeft(obj){
id = parseInt(obj.name.substr(2,1))
if(id>1){
  eval("document.all.ip" + (id -1) + ".focus()");
}//end if
}//end if
function Keypress(obj){
var objInput = obj;
cod = window.event.keyCode;

if(cod==46 && (obj.value).length>0){//如果按了“.”并且有了一个字符，向右移动一次
  window.event.keyCode=0;
  moveRight(obj);
}else if((obj.value).length==2 && (cod >= 48) && (cod <= 57)){//如果数字键并且够了两位
  if(cod<58){//
   obj.value = obj.value * 10 + cod - 48;
  }//end if
  window.event.keyCode = 0;
  moveRight(obj);
}else{ //判断输入的是不是数字
  if ( !(((cod >= 48) && (cod <= 57)) || (cod == 13) || (cod == 37) || (cod == 39))){
   window.event.keyCode = 0;
  }//end if
}//end if
}//end function keydown
function getCaretPos(obj){
var currentRange=document.selection.createRange();
var workRange=currentRange.duplicate();
obj.select();
var allRange=document.selection.createRange();
var len=0;
while(workRange.compareEndPoints("StartToStart",allRange)>0){
  workRange.moveStart("character",-1);
  len++;
}
currentRange.select();
return len;
}//end
function KeyDown(obj){
cod = window.event.keyCode;
i = getCaretPos(obj); //光标位置
n = obj.value.length; //字符长度

if(cod==37 && i==0){//光标左移
  moveLeft(obj);
}else if(cod==39 && i>=n){
  moveRight(obj);
}else if(cod==8 && (obj.value=="" || i==0)){
  moveLeft(obj);
}//end if
}//end
function checkDate(obj,max_num){
if(obj.value>max_num || obj.value<0){
  window.event.keyCode = 0;
  alert(obj.value + "是无效的项目，只能输入0到" + max_num + "之间的数。");
  obj.value = max_num;
  obj.focus();
  obj.select();
}//end if
}//end
</script>
<style type="text/css">

</style></head>
<body scroll=no style='margin:10;border:1 solid menu' bgcolor='menu'>
<table style="width:112px;height:15px" border="0" cellpadding="0" cellspacing="0" >
<tr bgcolor="#848284">
    <td width="1" height="1"></td>
    <td style=" width:92px"></td>
    <td width="1"></td>
    <td width="1"></td>
</tr>
<tr bgcolor="#424142">
    <td width="1" height="1"></td>
    <td width="1"></td>
    <td width="1"></td>
    <td width="1"></td>
</tr>
<tr>
    <td height="1" bgcolor="#666666"></td>
    <td bgcolor="#FFFFFF" style="height:12px">
  <table border="0" cellspacing="0" cellpadding="0" style="font-size:14px; width:92px; height:12px">
    <tr align="center">
   <td style="width:20px"><input name="ip1" type="text" style="border: 0px none;width:22px; height:12px" onBlur="checkDate(this,223);" onKeyDown="KeyDown(this)" onKeypress="Keypress(this)" value="" maxlength="3"></td>
   <td style="width:4px">.</td>
   <td style="width:20px"><input name="ip2" type="text" style="border: 0px none;width:22px; height:12px" onBlur="checkDate(this,255);" onKeyDown="KeyDown(this)" onKeypress="Keypress(this)" size="3" value="" maxlength="3"></td>
   <td style="width:4px">.</td>
   <td style="width:20px"><input name="ip3" type="text" style="border: 0px none;width:22px; height:12px" onBlur="checkDate(this,255);" onKeyDown="KeyDown(this)" onKeypress="Keypress(this)" size="3" value="" maxlength="3"></td>
   <td style="width:4px">.</td>
   <td style="width:20px"><input name="ip4" type="text" style="border: 0px none;width:22px; height:12px" onBlur="checkDate(this,255);outStr();" onKeyDown="KeyDown(this)" onKeypress="Keypress(this)" size="3" value="" maxlength="3"></td>
    </tr>
  </table>

</td>
    <td bgcolor="#D6D3CE"></td>
    <td bgcolor="#EEEEEE"></td>
</tr>
<tr bgcolor="D6D3CE">
    <td height="1" bgcolor="#666666"></td>
    <td bgcolor="#D6D3CE"></td>
    <td bgcolor="#D6D3CE"></td>
    <td bgcolor="#EEEEEE"></td>
</tr>
<tr>
    <td height="1" bgcolor="#666666"></td>
    <td bgcolor="#EEEEEE"></td>
    <td bgcolor="#EEEEEE"></td>
    <td bgcolor="#EEEEEE"></td>
</tr>
</table>
</body>
</html>