jQuery实现手机号码输入提示功能实例
本文实例讲述了jQuery实现手机号码输入提示功能的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery手机号码输入提示</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<style>
*{margin:0;padding:0;}
#main{width:728px;height:300px;
padding:60px;margin:0auto;
border:5pxsolid#CCC;
}
input{border:1pxsolid#666;}
.a{border:1pxsolidred;}
.text-magnifier{
background:nonerepeatscroll00#FFFFE4;
border:1pxsolid#E6C99E;
color:#FF4800;
height:50px;
left:170px;
padding:5px0010px;
position:absolute;
top:30px;
width:200px;
font:20pxTahoma,Helvetica,Arial,Simsun,sans-serif;
}
.text-magnifier.mag-explain{
border-top:1pxsolid#E6C99E;
color:#6C6C6C;
font-size:12px;
margin-top:5px;
width:190px;
}
.fn-hide{display:none}
</style>
<scripttype="text/javascript"src="jquery1.3.2.js"></script>
<script>
$(function(){
$("#k").focus(function(evt){
$(this).addClass("a");
if(this.value.length>0){
a(this);
d(this);
}
})
$("#k").keyup(function(evt){
if(this.value.length==0){
e();
}else{
a(this);
}
d(this);
})
$("#k").blur(function(evt){
$(this).removeClass("a");
e();
this.value=this.value
})
})
//计算div的left和top，显示div
functiona(evt){
vary=20;
y=$(evt).outerHeight();
$("#textMag").removeClass("fn-hide");
vart=$(evt).offset().top;
varl=$(evt).offset().left;
$("#textMag").css({
"top":(t+y)+"px",
"left":l+"px"
});
}
//隐藏div
functione(){
$("#textMag").addClass("fn-hide")
}
//控制div里显示的数字
functiond(e){
vari=e.value;
i=$.trim(i);
varh=i.substring(0,3);
i=i.substring(3);
while(i&&i.length>0){
h+=""+i.substring(0,4);
i=i.substring(4)
}
$("#mag-text").html(h);
}
</script>
</head>
<body>
<divid="main">
手机号码：
<inputtype="text"id="k"maxlength="11"class="i-text"value=""/>
<divclass="text-magnifierfn-hide"id="textMag">
<divid="mag-text"class="mag-text"></div>
<divclass="mag-explain">手机号码是11位数字</div>
<div>https://www.nhooo.com/</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。