手机号码提示

dyldragon

浏览: 148478 次
性别:
来自: 北京

最近访客更多访客>>

many086

saw

铁石_001

快叫救护车

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

转载
jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>手机号码提示</title>
<style type="text/css">
* {
	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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(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>
	
</div>
</body>
</html>