jQuery 邮箱提示输入 傷城~ 2021-09-26 09:12 444阅读 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/inputmail.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
还没有评论,来说两句吧...