jQuery 邮箱提示输入

傷城~ 2021-09-26 09:12 481阅读 0赞

# 1。jQuery代码 #

/** * Created by qqg on 2017/12/5. */
    (function($){ 
        $.fn.extend({
       //对jquery方法的扩展
            "changeTips":function(value){ 
                value= $.extend({divTip:""},value)
    
                var $this = $(this);
                var indexLi = 0;
    
                //点击document隐藏下拉层
                $(document).click(function(event){ 
                    if($(event.target).attr("class")== value.divTip || $(event.target).is("li")){
       //value.divTip即on_changes 他的类是on_changes或者当前对象是li
                        var liVal = $(event.target).text();
                        $this.val(liVal);
                        blus();
                    }else{
                        blus();
                    }
                })
    
                //隐藏下拉层
                function blus(){ 
                    $(value.divTip).hide();
                }
    
                //键盘上下执行的函数
                function keychang(up){ 
                    if(up== "up"){
                        if(indexLi== 1){
                            indexLi= $(value.divTip).children().length-1;//当index是1，选择了向上时，不进去o,而是选择了列表的最后一个
                        }else{
                            indexLi--;
                        }
                    }else{
       //选择了向下
                        if(indexLi== $(value.divTip).children().length-1){
       //当是最后一个的时候，仍然选择下一个时，回到index=1处
                            indexLi= 1;
                        }else{
                            indexLi++;
                        }
                    }
                    $(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();//indexli加上高亮，其他去掉
                }
    
                //值发生改变时
                function valChange(){ 
                    var tex = $this.val();//输入框的值
                    var fronts = "";//存放含有“@”之前的字符串
                    var af = /@/;
                    var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正则字面量方法，是不能用变量的。所以这里用的是new方式。
    
    
                    //让提示层显示，并对里面的LI遍历
                    if($this.val()==""){
                        blus();
                    }else{
                        $(value.divTip).
                        show().
                        children().
                        each(function(index){ 
                            var valAttr = $(this).attr("email");//@163.com @qq.com等内
                               if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();
                               }
                            //索引值大于1的LI元素进处处理
                            if(index>1){
                                //当输入的值有“@”的时候
                                if(af.test(tex)){
                                    //如果含有“@”就截取输入框这个符号之前的字符串
                                    fronts= tex.substring(tex.indexOf("@"),0);
                                    $(this).text(fronts+valAttr);
                                    //判断输入的值“@”之后的值，是否含有和LI的email性
                                    if(regMail.test($(this).attr("email"))){
                                        $(this).show();
                                    }else{
                                        if(index>1){
                                            $(this).hide();
                                        }
                                    }
                                }
                                //当输入的值没有“@”的时候
                                else{
                                    $(this).text(tex+valAttr);
                                }
                            }
                        })
                    }
                }
    
    
                //输入框值发生改变的时候执行函数，这里的事件用判断处理浏览器兼容性;
                if(window.ActiveXObject || "ActiveXObject" in window){
       //判断是否是ie浏览器 js 1.9 以后不能用这个方法 $.browser.msie
                    $(this).bind("propertychange",function(){ 
                        valChange();
                    })
                }else{
       //非ie
                    $(this).bind("input",function(){ 
                        valChange();
                    })
                }
    
                //鼠标点击和悬停LI
                $(value.divTip).children().
                hover(function(){ 
                    indexLi= $(this).index();//获取当前鼠标悬停时的LI索引值;
                    if(indexLi!=0){
       //索引值不是0
                        $(this).addClass("active").siblings().removeClass();//当前的节点加上class属性，他的兄弟节点失去class属性
                    }
                })
    
                //按键盘的上下移动LI的背景色
                $this.keydown(function(event){ 
                    if(event.which== 38){
       //向上
                        keychang("up");
                    }else if(event.which == 40){
       //向下
                        keychang();
                    }else if(event.which == 13){ //回车
                        var liVal = $(value.divTip).children().eq(indexLi).text();//列表中第当前索引的
                        $this.val(liVal);
                        blus();//隐藏下拉层
                    }
                })
            }
        })
    })(jQuery)

# 2.html 代码 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    
    
        <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    
       
        <script type="text/javascript" src="js/emailTip2.js"></script>
        <title>Title</title>
        <style type="text/css"> *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:#666;} ul,li{ list-style:none;} h1.tit-h1 { font-size:38px;text-align:center; margin:30px 0 15px; color:#f60;} .go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;} .wrap{ border:1px dashed #ccc;background:#f8f8f8; padding:20px;} .login{ width:400px; margin:0 auto;background:#EBEBEB; position:relative;} input{ width:230px; height:28px;margin:10px 0; line-height:28px;} .login .on_changes{ width:232px;position:absolute; top:40px; list-style:none; background:#FFF; border:1px solid#000; display:none; padding:10px;} .login .on_changes li{ margin:8px;padding:4px;} .login .on_changes li.active{ background:#CEE7FF;} </style>
    </head>
    <body>
    <h1 class="tit-h1">jquery输入框邮箱下拉提示层</h1>
    <div class="wrap">
        <script type="text/javascript"> $(function(){ $("#loginName").changeTips({ divTip:".on_changes" }); }) </script>
        <div class="login">
        <div class="ln">              
                       
            <input type="text" maxlength="128" name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" />
        </div>
        <ul class="on_changes" style="position: absolute; left: 78px; top:42px">
            <li email="">请选择邮箱类型</li>
                <li email=""></li>
            <li email="@sina.com"></li>
            <li email="@163.com"></li>
            <li email="@qq.com"></li>
            <li email="@139.com"></li>
            <li email="@hotmail.com"></li>
            <li email="@126.com"></li>
            <li email="@gmail.com"></li>
            <li email="@yahoo.com"></li>
        </ul>
        </div>
    </div>
    </body>

# 3.界面截图 #

![这里写图片描述][SouthEast]

--------------------

[SouthEast]: /images/20210923/c9c6d1b9fe594abb91fbc782fd4ad5bd.png