jquery输入框邮箱下拉提示层

图为：

HTML代码为：

 1 <h1 class="tit-h1">jquery输入框邮箱下拉提示层</h1> 
 2 <div class="wrap">
 3      <div class="login">
 4           <div style="padding:0 0 0 78px;"><input type="text" maxlength="128" name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" /></div>
 5           <ul class="on_changes" style="position: absolute; left: 78px; top: 42px">
 6               <li email="">请选择邮箱类型</li>
 7               <li email=""></li>
 8               <li email="@sina.com"></li>
 9               <li email="@163.com"></li>
10               <li email="@qq.com"></li>
11               <li email="@hotmail.com"></li>
12               <li email="@126.com"></li>
13               <li email="@gmail.com"></li>
14               <li email="@yahoo.com"></li>
15           </ul>
16      </div>
17 </div>
18 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
19 <script type="text/javascript" src="js/inputmail.js"></script>
20 <script type="text/javascript">
21   $(function(){
22     $("#loginName").changeTips({
23       divTip:".on_changes"
24     }); 
25   })
26   </script>

 

JS插件为：

  1 (function($){
  2     $.fn.extend({
  3         "changeTips":function(value){
  4             value=$.extend({
  5                 divTip:""
  6             },value)
  7             var $this=$(this);
  8             var indexLi=0;
  9 
 10             //点击document隐藏下拉层
 11             $(document).click(function(event){
 12                 if($(event.target).attr('class')==value.divTip || $(event.target).is('li')){
 13                     var liVal=$(event.target).text();
 14                     $this.val(liVal);
 15                     blus();
 16                 }else{
 17                     blus();
 18                 }
 19             })
 20             //隐藏下拉层
 21             function blus(){
 22                 $(value.divTip).hide();
 23             }
 24             //键盘上下执行的函数
 25             function keychange(up){
 26                 if(up == 'up'){
 27                     if(indexLi == 1){
 28                         indexLi = $(value.divTip).children().length - 1;
 29                     }else{
 30                         indexLi--;
 31                     }
 32                 }else{
 33                     if(indexLi == $(value.divTip).children().length -1){
 34                         indexLi = 1
 35                     }else{
 36                         indexLi++;
 37                     }
 38                 }
 39                 $(value.divTip).children().eq(indexLi).addClass('active').siblings().removeClass();
 40             }
 41             //输入框值发生变化
 42             function valChange(){
 43                 var tex =$this.val(); //输入框的值
 44                 var fronts='';//存放含有“@”之前的字符串
 45                 var af=/@/;
 46                 var regMail=new RegExp(tex.substring(tex.indexOf('@'))); //有“@”之后的字符串,注意正则字面量方法，是不能用变量的。所以这里用的是new方式。
 47 
 48                 //让提示层显示，并对里面的LI遍历
 49                 if($this.val() ==''){
 50                     blus();
 51                 }else{
 52                     $(value.divTip).show().children().each(function(index){
 53                         var valAttr=$(this).attr('email');
 54                         if(index==1){
 55                             $(this).text(tex).addClass("active").siblings().removeClass();
 56                         }
 57                         //索引值大于1的LI元素进行处理
 58                         if(index > 1){
 59                             //当输入的值有“@”的时候
 60                             if(af.test(tex)){
 61                                 //如果含有“@”就截取输入框这个符号之前的字符串
 62                                 fronts=tex.substring(tex.indexOf("@"),0);
 63                                 $(this).text(fronts + valAttr);
 64                                 //判断输入的值“@”之后的值，是否含有和LI的email属性
 65                                 if(regMail.test($(this).attr('email'))){
 66                                     $(this).show();
 67                                 }else{
 68                                     if(index > 1){
 69                                         $(this).hide();
 70                                     }
 71                                 }
 72                             }//当输入的值没有“@”的时候
 73                             else{
 74                                 $(this).text(tex + valAttr);
 75                             }
 76                         }
 77                     })
 78                 }
 79             }
 80             //输入框值发生改变的时候执行函数，这里的事件用判断处理浏览器兼容性;
 81             // if($.browser.msie){//$.browser.msie在1.9以后的jQuery中不存在了，所以报错
 82             //     $(this).bind("propertychange",function(){
 83             //         valChange();
 84             //     })
 85             // }else{
 86             //     $(this).bind("input",function(){
 87             //         valChange();
 88             //     })
 89             // }
 90             $(this).bind("input",function(){
 91                     valChange();
 92                 })
 93             //鼠标点击和悬停LI
 94             $(value.divTip).children().hover(function(){
 95                 indexLi=$(this).index();//获取当前鼠标悬停时的LI索引值
 96                 if($(this).index() !=0){
 97                     $(this).addClass('active').siblings().removeClass();
 98                 }
 99             });
100             //按键盘的上下移动LI的背景色
101             $this.keydown(function(event){
102                 if(event.which == 38){//向上
103                     keychange('up');
104                 }else if(event.which == 40){//向下
105                     keychange();
106                 }else if(event.which ==13){//回车
107                     var liVal=$(value.divTip).children().eq(indexLi).text();
108                     $this.val(liVal);
109                     blus();
110                 }
111             })
112         }
113     })
114 })(jQuery)

 

 

本地效果为：desk/plug/inputEmail/demo.html

线上效果为：http://www.jq22.com/jquery-info4397

 

posted @ 2016-06-30 17:52  chenguiya  阅读(413)  评论(0)    收藏  举报