jQuery实现手机号码输入提示功能实例

前端技术 2023/08/09 JavaScript

本文实例讲述了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.phpstudy.net/</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/644

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案