<!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>
转载:http://www.cssrain.cn/demo/num13.html