Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-27 13:25:07

js手机号码验证 js 判断手机号码 js 判断手机号 js 正则手机号

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!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=gb2312" />
<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="http://www.2ky.cn/include/jquery-1.2.6.pack.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>
</body>
</html>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章： js判断提交表单文本框是否为空特效代码

下一篇文章： css美化网页注册界面与登录界面样式代码

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

非常漂亮的jQuery手机号码输入提示网页特效代码

推荐阅读：

相关代码：

标签分类