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.phpstudy.net/</div>
</body>
</html>

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



相关阅读:
CentOS yum php mcrypt 扩展安装方法
使用js在页面中绘制表格核心代码
asp.net实现图片以二进制流输出的两种方法
WinXP因配额不足导致无法访问如何解决
MySQL索引之主键索引
jquery trigger实现联动的方法
非常实用的php验证码类
Dojo获取下拉框的文本和值实例代码
安装专业版的linux的方法 图解安装专业版的linux
SQL数据库实例名称找不到或远程连接失败并显示错误error40的原因及解决办法
Oracle数据库中的级联查询、级联删除、级联更新操作教程
MAC 快捷键二则(附终端光标的快捷键)
js实现日期级联效果
分析js闭包引起的事件注册问题
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 爸爸的感想 不必畏惧,你总会遇到属于自己的精彩 会计培训征文:心声与感想 借酒品人生 外科护士工作总结范文 做一个有责任心的人作文1500字 关于春节的祝福语 冬夜与故友聚送吉校书 伤口好痛 企业个人工作总结写法 这样一份西红柿的爱 2016年六一儿童节主持词 咏史诗。望思台 人事劳动合同(范本) 俯视有时比仰视更重要 “平凡与自豪”话题两篇作文 读老师无法拒绝美有感 读亲爱的爸爸妈妈有感 夏明翰——我最敬佩的人800字 2013最新市政工程师工作总结 献给亲爱的他一封信 陈丹青:文凭是平庸的保证 2015年送教下乡活动总结 八荣八耻读后感400字 六一游记作文900字 诚信演讲稿:诚信若水 损人的话不带脏字图片 让你快速成长起来的句子 绝口不提不是因为忘记,而是因为铭记 期待作文200字 为谁成殇? 最让我难忘的一件事作文700字 七堇年经典语录集 以温暖为话题的作文 同学婚礼祝福语 外国名著读后感的范文 人的潜力是无限的 间隔 小学三年级作文450字:给快乐天使何洁的一封信 可怜的一天 飞越吧梦想 观深圳市新博物馆有感 去做自己生活上的主人,让心为自己指引方向 央视“勤杂工” 2012年个人上半年工作总结汇报 2016超级演说家薛来演讲稿 爱因斯坦又错了 六年级家长会家长发言稿范文5篇 女儿给父母的一封感恩信(转载)作文1500字 [如梦令]白发切骨长涕 玻璃打碎了 荷作文500字

Copyright © 2016 phpStudy |