首页 > 代码库 > 用面向对象解决 输入用户名自动显示邮箱后缀列表的方法

用面向对象解决 输入用户名自动显示邮箱后缀列表的方法

---恢复内容开始---

当我们注册或者登录要用邮箱格式时会显示邮箱后缀的提示下拉框

效果如图所示

技术分享

主要介绍了JS输入用户名自动显示邮箱后缀列表的方法,可实现自动显示邮箱后缀名列表的功能,

 

原理是:一个输入框 当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入11的时候 下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱。

同理 此插件不需要任何html标签,只需要一个输入框 有相对应的id类名就ok 且父级有个class类名,其他的都不需要。内部的HTML代码都是自动生成的

下面便是此功能代码;

此段代码引用了jq 所以需要先引入jq.js;

<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>

把我们需要提示的邮箱后缀存入数组;

var emailsorce = ["@sina.com", "@163.com", "@qq.com", "@126.com", "@vip.sina.com",
    "@sina.cn", "@hotmail.com", "@gmail.com", "@sohu.com", "@yahoo.cn", "@139.com",
    "@wo.com.cn", "@189.cn"];

  接下来就是面向对象的内容,中间都有注释;

var email={
    init:function(){
        var that=this;
        $("#email").focus(function(){
            if($(this).val()==""){
                that.hint();
            }else{
                $("#closeuser").css({"display": "block"});//消除按钮显示
            }
        })
    },
    bindeven:function(){
        this.chose();
        this.delet();
        this.miss();
    },
    miss:function(){//失去焦点删除按钮隐藏 下拉选项消失 判断是否为邮箱格式
        $("#email").blur(function(){
            $("#closeuser").css({"display": "none"});
            $("#sele").css({"display": "none"});
            var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;//邮箱正则表达式
            if(filter.test($("#email").val())){//是邮箱格式
                $("#email").css({"border":"0.1rem solid #0cbd19"})
            }else{//不是邮箱格式
                $("#email").css({"border":"0.1rem solid #ff072f"})
            }
        })
    },
    hint:function(){//初始输入出现邮箱选项 消除按钮出现
        var that=this;
        $("#email").on("input",function(){
            if($(this).val()!=""){
                if($(this).val().indexOf("@")==-1){//是否输入到@
                    $("#sele").html("");//每次输入初始化
                    $("#sele").css({"display": "block"});
                    for(var i=0;i<emailsorce.length;i++){//把集合的邮箱加入li中
                        var li=$("<li>"+$(this).val()+emailsorce[i]+"</li>");
                        $("#sele").append(li);
                    }
                    $("#closeuser").css({"display": "block"});//消除按钮显示

                }else{
                    var arr=$(this).val().split("@");
                    if(arr[1]!=""){//筛选@之后的内容
                        $("#sele").html("");//每次输入初始化
                        for(var i=0;i<emailsorce.length;i++){
                            var temp=emailsorce[i].split(".")[0];
                            if(temp.indexOf(arr[1])!=-1){//筛选选项是否含有输入的内容 有显示 没有隐藏
                                var li=$("<li>"+arr[0]+emailsorce[i]+"</li>");
                                $("#sele").append(li);
                            }
                        }
                    }
                }
            }else{
                //单框内没内容消除按钮隐藏 下拉选项隐藏
                $("#closeuser").css({"display": "none"});
                $("#sele").css({"display": "none"});
            }
        })
    },
    chose:function(){
        $(document).on("touchstart","#sele li",function(){
            //点击下拉框选项 框内内容为点击选项 下拉框消失 删除按钮消失
            $("#email").val($(this).html());
            $("#closeuser").css({"display": "none"});
            $("#sele").css({"display": "none"});
        })

    },
    delet:function(){
        //框内内容删除 下拉框隐藏
        $(document).on("touchstart","#closeuser",function(){
            //点击消除按钮事件
            $("#email").val("");
            $("#sele").css({"display": "none"});
            $("#closeuser").css({"display": "none"});
        })
    }
}

  下面只要调用就ok了;

email.init();
email.bindeven();

  

 一、功能分析:   1.input输入框的值,发生变化时,显示提示的下拉层;   2.input输入框的值,发生变化时,显示提示的下拉层,会根据输入的内容自动往“@”前面添加;   3.input输入框的值,发生变化时,显示提示的下拉层,会根据输入的内容对下拉层“@”后面的内容进行筛选;   4.点击下拉层里面的提示内容,会将其值,填充到输入框;   5.按下鼠标回车键会将其选中的下拉层里的内容,填充到输入框;   6.按键盘的“向上”或“向下”的方向键,可以在下拉层的选项中移动(循环移动,改变当前LI的背景色);   7.鼠标悬停在下拉层的LI上面时,会有一个背景色。 二、功能实现:   1.input输入框的值,发生变化时的事件是:propertychange(IE)或input(标准);   2.在发生propertychange事件的时候,取其输入框的值,再取其“@”前面的值,并赋值给下拉层里面的LI加上LI的email属性值;   3.在发生propertychange事件的时候,     3.1取其输入框的值,再取其“@”后面的值,     3.2并将这个值与下拉层里面的LI的email属性值进行正则匹配;       这里要注意,正则字面量方法,是不能用变量的。所以这里用的是new方式。       这里的正则是取的输入框“@”后面的值,所以正则,是变化的。而LI的EMAIL属性值是不变的   4.这里用了一个事件委托方式,将点击事件绑定给document,然后通过判断,点击时最初触发的DOM元素,是什么。来决定,     4.1否隐藏下拉提示层?     4.2还是需要将下拉层,选中的值,赋给输入框     (这里不能直接使用,当输入框失去焦点时,隐藏下拉提示层,因为会与点击下拉层,将其值填入输入框,这个功能有逻辑上的矛盾;)   5.和上面第4条差不多;   6.就是要注意,在鼠标悬停时,把当前的LI索引存入一个全局变量当中,这样就可以告诉“向上”或“向下”按键时,的起始位置了;

 

用面向对象解决 输入用户名自动显示邮箱后缀列表的方法