在网站建设过程中经常会用到手机号码输入提示信息，今天绵阳动力网络公司为你介绍关于jQuery实现手机号码输入提示功能,实例分析了jQuery针对手机号码的判断与提示相关技巧,非常具有实用价值,需要的朋友可以参考下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery手机号码输入提示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0;padding:0;}
#main{width:728px;height:300px; padding:60px;margin:0 auto; border:5px solid #CCC; }
input{border: 1px solid #666;}
.a{border: 1px solid red;}
.text-magnifier { background:none repeat scroll 0 0 #FFFFE4; border:1px solid #E6C99E; color:#FF4800; height:50px;
left:170px; padding:5px 0 0 10px; position:absolute; top:30px;
width:200px; font:20px Tahoma,Helvetica,Arial,Simsun,sans-serif; }
.text-magnifier .mag-explain { border-top:1px solid #E6C99E; color:#6C6C6C; font-size:12px; margin-top:5px; width:190px; }
.fn-hide{display:none}
</style>
<script type="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
function a(evt){
var y = 20;
y = $(evt).outerHeight();
$("#textMag").removeClass("fn-hide");
var t = $(evt).offset().top; var l = $(evt).offset().left; $("#textMag").css({ "top": (t+y) + "px", "left":l + "px"});
}
//隐藏div
function e(){
$("#textMag").addClass("fn-hide")
}
//控制div里显示的数字
function d(e){
var i = e.value; i=$.trim(i); var h=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>
<div id="main"> 手机号码： <input type="text" id="k" maxlength="11" class="i-text" value="" />
<div class="text-magnifier fn-hide" id="textMag" >
<div id="mag-text" class="mag-text"></div>
<div class="mag-explain">手机号码是11位数字</div> <div>http://www.webmy.cn/</div>
</body>
</html>
网站