jQuery手机号码输入提示

最新推荐文章于 2021-03-20 09:04:58 发布

Omarix

最新推荐文章于 2021-03-20 09:04:58 发布

阅读量1k

点赞数

分类专栏： JQuery 文章标签：手机 jquery function jquery插件 border class

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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="http://www.codefans.net/ajaxjs/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>
</body>
</html>

Omarix

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery手机号码输入提示

jQuery插件实现适时提示，输入手机号码给出友情提示，避免用户输入错误，比较典型的层提示效果，现在流行的效果，本代码兼容性好，欢迎使用。jQuery手机号码输入提示 *{margin:0;padding:0;}#main{width:72
复制链接

扫一扫

专栏目录