用JavaScript实现的一个IP地址输入框_表单特效

2020年3月8日 08:48:19js教程评论1.1K views阅读模式

用JavaScript实现的一个IP地址输入框，感觉不是太好，如果是192.168.1.1就必须输入192.168.001.001了别扭啊

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="GENERATOR" content="Microsoft FrontPage 4.0"> 
<meta name="ProgId" content="FrontPage.Editor.Document"> 
<style> 
.a3{width:30;border:0;text-align:center} 
</style> 
<script> 
function mask(obj){ 
obj.value=obj.value.replace(/[^\d]/g,'') 
key1=event.keyCode 
if (key1==37 || key1==39) 
{ obj.blur(); 
nextip=parseInt(obj.name.substr(2,1)) 
nextip=key1==37?nextip-1:nextip+1; 
nextip=nextip>=5?1:nextip 
nextip=nextip<=0?4:nextip 
eval("ip"+nextip+".focus()") 
} 
if(obj.value.length>=3) 
if(parseInt(obj.value)>=256 || parseInt(obj.value)<=0) 
{ 
alert(parseInt(obj.value)+"IP地址错误！") 
obj.value="" 
obj.focus() 
return false; 
} 
else 
{ obj.blur(); 
nextip=parseInt(obj.name.substr(2,1))+1 
nextip=nextip>=5?1:nextip 
nextip=nextip<=0?4:nextip 
eval("ip"+nextip+".focus()") 
} 
} 
function mask_c(obj) 
{ 
clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,'')) 
} 
</script> 
<title>IP地址输入</title> 
</head> 
<body>IP地址输入 
<div style="border-width:1;border-color:balck;border-style:solid;width:165;font-size:9pt"> 
<input type=text name=ip1 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()>. 
<input type=text name=ip2 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()>. 
<input type=text name=ip3 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()>. 
<input type=text name=ip4 maxlength=3 class=a3 onkeyup="mask(this)" onbeforepaste=mask_c()> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家有时间可以弄下，增加个输入.即可切换到下一个