你的位置:首页 > Java教程

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


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

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

效果如图所示

效果

主要介绍了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索引存入一个全局变量当中,这样就可以告诉“向上”或“向下”按键时,的起始位置了;