如何做出系统的IP地址输入框效果
1个回答
展开全部
<html>
<style type="text/css">
.m{border:1px solid #E3E9EF;display: inline-block;text-align: center;border-top-color: #ABADB3;}
.ip{height:25px;width:30px;border:none;}
</style>
<script>
//e为 event o为input对象 i 为 第几个输入框
function ipVali(e,o,i)
{ //alert(e.keyCode)
// 96-105 小键盘数字键 48-57大键盘数字键 8 退格键 46 del键 16 shift键 116 刷新 190 大键盘的点 110小键盘的点 9 tab
var inputs = o.parentNode.getElementsByTagName("input");
if(e.keyCode == 9 || (e.keyCode >= 96 && e.keyCode <= 105) ||(e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode==8 || e.keyCode==46|| e.keyCode==116 || e.keyCode == 16)
{
if(e.shiftKey && e.keyCode >= 48 && e.keyCode <= 57)
{
if(e.keyCode != 56)
return false;
}
if( e.keyCode == 9)
{
return true;
}
if(e.keyCode == 8)
{
if(o.value === '')
{
if(i>0)
{ //OK
inputs[i-1].focus();
}
return true;
}
return true;
}
if(o.value.length >= 3 && getRangeByObj(o) == '')
{
if(null != inputs[i+1])
{
if(o.value.length > 1 && parseInt(o.value.charAt(0)) == 0){
o.value = parseInt(o.value,"10");
}
inputFormat(o);
inputs[i+1].focus();
}
}
}
else if(190 == e.keyCode || 110 == e.keyCode) //输入的是点
{
if(o.value == '')
{
for(var j=0; j<=i; j++)
{
if(inputs[j].value == '')
{
inputs[j].value="";
}
}
}
inputFormat(o);
inputs[i+1].focus();
return false;
}
else
{
return false;
}
}
function ipVali2(o,i)
{
if(o.value != '')
{
if(i == 1) //ip地址的第一个字段
{
if(o.value > 223)
{
o.value = 223;
}
}
else
{
if(o.value > 255)
{
o.value = 255;
}
}
}
else
{
o.value = "";
}
}
function getRangeByObj(obj)
{
var word='';
if (document.selection){
o=document.selection.createRange();
if(o.text.length>0)word=o.text;
}else{
p1=obj.selectionStart;
p2=obj.selectionEnd;
if (p1||p1=='0'){
if(p1!=p2)word=obj.value.substring(p1,p2);
}
}
return word;
}
function inputFormat(o){
if(o.value.length > 1 && parseInt(o.value.charAt(0)) == 0){
o.value = parseInt(o.value,"10");
}
}
function show(){
var str = "";
var ary = document.getElementsByName('ip');
for(var i=0;i<ary.length;i++){
str += ary[i].value + ".";
}
document.getElementById('show').value = str.slice(0,-1);
}
</script>
<body>
<span class="m">
<input class="ip" name="ip" onkeydown="return ipVali(event,this,0);" onblur="return ipVali2(this,1);" type="text" maxlength="3" size="3"/>.
<input class="ip" name="ip" onkeydown="return ipVali(event,this,1);" onblur="return ipVali2(this,2);" type="text" maxlength="3" size="3"/>.
<input class="ip" name="ip" onkeydown="return ipVali(event,this,2);" onblur="return ipVali2(this,2);" type="text" maxlength="3" size="3"/>.
<input class="ip" name="ip" onkeydown="return ipVali(event,this,3);" onblur="return ipVali2(this,2);" type="text" maxlength="3" size="3"/>
</span><button onclick="show()">OK</button>
<hr color="#388ee3"/>
<input type="text" id="show"/>
</body>
</html>
<style type="text/css">
.m{border:1px solid #E3E9EF;display: inline-block;text-align: center;border-top-color: #ABADB3;}
.ip{height:25px;width:30px;border:none;}
</style>
<script>
//e为 event o为input对象 i 为 第几个输入框
function ipVali(e,o,i)
{ //alert(e.keyCode)
// 96-105 小键盘数字键 48-57大键盘数字键 8 退格键 46 del键 16 shift键 116 刷新 190 大键盘的点 110小键盘的点 9 tab
var inputs = o.parentNode.getElementsByTagName("input");
if(e.keyCode == 9 || (e.keyCode >= 96 && e.keyCode <= 105) ||(e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode==8 || e.keyCode==46|| e.keyCode==116 || e.keyCode == 16)
{
if(e.shiftKey && e.keyCode >= 48 && e.keyCode <= 57)
{
if(e.keyCode != 56)
return false;
}
if( e.keyCode == 9)
{
return true;
}
if(e.keyCode == 8)
{
if(o.value === '')
{
if(i>0)
{ //OK
inputs[i-1].focus();
}
return true;
}
return true;
}
if(o.value.length >= 3 && getRangeByObj(o) == '')
{
if(null != inputs[i+1])
{
if(o.value.length > 1 && parseInt(o.value.charAt(0)) == 0){
o.value = parseInt(o.value,"10");
}
inputFormat(o);
inputs[i+1].focus();
}
}
}
else if(190 == e.keyCode || 110 == e.keyCode) //输入的是点
{
if(o.value == '')
{
for(var j=0; j<=i; j++)
{
if(inputs[j].value == '')
{
inputs[j].value="";
}
}
}
inputFormat(o);
inputs[i+1].focus();
return false;
}
else
{
return false;
}
}
function ipVali2(o,i)
{
if(o.value != '')
{
if(i == 1) //ip地址的第一个字段
{
if(o.value > 223)
{
o.value = 223;
}
}
else
{
if(o.value > 255)
{
o.value = 255;
}
}
}
else
{
o.value = "";
}
}
function getRangeByObj(obj)
{
var word='';
if (document.selection){
o=document.selection.createRange();
if(o.text.length>0)word=o.text;
}else{
p1=obj.selectionStart;
p2=obj.selectionEnd;
if (p1||p1=='0'){
if(p1!=p2)word=obj.value.substring(p1,p2);
}
}
return word;
}
function inputFormat(o){
if(o.value.length > 1 && parseInt(o.value.charAt(0)) == 0){
o.value = parseInt(o.value,"10");
}
}
function show(){
var str = "";
var ary = document.getElementsByName('ip');
for(var i=0;i<ary.length;i++){
str += ary[i].value + ".";
}
document.getElementById('show').value = str.slice(0,-1);
}
</script>
<body>
<span class="m">
<input class="ip" name="ip" onkeydown="return ipVali(event,this,0);" onblur="return ipVali2(this,1);" type="text" maxlength="3" size="3"/>.
<input class="ip" name="ip" onkeydown="return ipVali(event,this,1);" onblur="return ipVali2(this,2);" type="text" maxlength="3" size="3"/>.
<input class="ip" name="ip" onkeydown="return ipVali(event,this,2);" onblur="return ipVali2(this,2);" type="text" maxlength="3" size="3"/>.
<input class="ip" name="ip" onkeydown="return ipVali(event,this,3);" onblur="return ipVali2(this,2);" type="text" maxlength="3" size="3"/>
</span><button onclick="show()">OK</button>
<hr color="#388ee3"/>
<input type="text" id="show"/>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
