jquery实现邮箱自动填充提示功能


Posted in Javascript onNovember 17, 2015

邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名
为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去

jquery实现邮箱自动填充提示功能

核心代码(需要jquery的支持):

(function($){
 $.fn.mailAutoComplete = function(options){
 var defaults = {
  boxClass: "mailListBox", //外部box样式
  listClass: "mailListDefault", //默认的列表样式
  focusClass: "mailListFocus", //列表选样式中
  markCalss: "mailListHlignt", //高亮样式
  zIndex: 1,
  autoClass: true, //是否使用插件自带class样式
  mailArr: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组
  textHint: false, //文字提示的自动显示与隐藏
  hintText: "",
  focusColor: "#333"
  //blurColor: "#999"
 };
 var settings = $.extend({}, defaults, options || {});
 
 //页面装载CSS样式
 if(settings.autoClass && $("#mailListAppendCss").size() === 0){
  $('<style id="mailListAppendCss" type="text/css">.mailListBox{border:1px solid #369; background:#fff; font:12px/20px Arial;}.mailListDefault{padding:0 5px;cursor:pointer;white-space:nowrap;}.mailListFocus{padding:0 5px;cursor:pointer;white-space:nowrap;background:#369;color:white;}.mailListHlignt{color:red;}.mailListFocus .mailListHlignt{color:#fff;}</style>').appendTo($("head")); 
 }
 var cb = settings.boxClass, cl = settings.listClass, cf = settings.focusClass, cm = settings.markCalss; //插件的class变量
 var z = settings.zIndex, newArr = mailArr = settings.mailArr, hint = settings.textHint, text = settings.hintText, fc = settings.focusColor, bc = settings.blurColor;
 //创建邮件内部列表内容
 $.createHtml = function(str, arr, cur){
  var mailHtml = "";
  if($.isArray(arr)){
  $.each(arr, function(i, n){
   if(i === cur){
   mailHtml += '<div class="mailHover '+cf+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>'; 
   }else{
   mailHtml += '<div class="mailHover '+cl+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>'; 
   }
  });
  }
  return mailHtml;
 };
 //一些全局变量
 var index = -1, s;
 $(this).each(function(){
  var that = $(this), i = $(".justForJs").size(); 
  if(i > 0){ //只绑定一个文本框
   return; 
  }
  var w = that.outerWidth(), h = that.outerHeight(); //获取当前对象(即文本框)的宽高
  //样式的初始化
  that.wrap('<span style="display:inline-block;position:relative;"></span>')
  .before('<div id="mailListBox_'+i+'" class="justForJs '+cb+'" style="min-width:'+w+'px;_width:'+w+'px;position:absolute;left:-6000px;top:'+h+'px;z-index:'+z+';"></div>');
  var x = $("#mailListBox_" + i), liveValue; //列表框对象
  that.focus(function(){
  //父标签的层级
  $(this).css("color", fc).parent().css("z-index", z); 
  //提示文字的显示与隐藏
  if(hint && text){
   var focus_v = $.trim($(this).val());
   if(focus_v === text){
   $(this).val("");
   }
  }
  //键盘事件
  $(this).keyup(function(e){
   s = v = $.trim($(this).val()); 
   if(/@/.test(v)){
   s = v.replace(/@.*/, "");
   }
   if(v.length > 0){
   //如果按键是上下键
   if(e.keyCode === 38){
    //向上
    if(index <= 0){
    index = newArr.length; 
    }
    index--;
   }else if(e.keyCode === 40){
    //向下
    if(index >= newArr.length - 1){
    index = -1;
    }
    index++;
   }else if(e.keyCode === 13){
    //回车
    if(index > -1 && index < newArr.length){
    //如果当前有激活列表
    $(this).val($("#mailList_"+index).text()); 
    }
   }else{
    if(/@/.test(v)){
    index = -1;
    //获得@后面的值
    //s = v.replace(/@.*/, "");
    //创建新匹配数组
    var site = v.replace(/.*@/, "");
    newArr = $.map(mailArr, function(n){
     var reg = new RegExp(site); 
     if(reg.test(n)){
     return n; 
     }
    });
    }else{
    newArr = mailArr;
    }
   }
   x.html($.createHtml(s, newArr, index)).css("left", 0);
   if(e.keyCode === 13){
    //回车
    if(index > -1 && index < newArr.length){
    //如果当前有激活列表
    x.css("left", "-6000px"); 
    }
   }
   }else{
   x.css("left", "-6000px"); 
   }
  }).blur(function(){
   if(hint && text){
   var blur_v = $.trim($(this).val());
   if(blur_v === ""){
    $(this).val(text);
   }
   }
   $(this).css("color", bc).unbind("keyup").parent().css("z-index",0);
   x.css("left", "-6000px"); 
   
  }); 
  //鼠标经过列表项事件
  //鼠标经过
  $(".mailHover").live("mouseover", function(){
   index = Number($(this).attr("id").split("_")[1]); 
   liveValue = $("#mailList_"+index).text();
   x.children("." + cf).removeClass(cf).addClass(cl);
   $(this).addClass(cf).removeClass(cl);
  });
  });

  x.bind("mousedown", function(){
  that.val(liveValue); 
  });
 });
 };
 
})(jQuery);

页面(这里就取一个div做实例):

<div class="reg_lin1">
<div class="lin1_1">常用邮箱:</div>
<div class="lin1_2"><input type="text" class = "reg_text" id = "email" name = "email"/></div>
<div class="lin1_3"></div>
</div>
<script type="text/javascript">
$("#email").mailAutoComplete({
boxClass: "out_box", //外部box样式
listClass: "list_box", //默认的列表样式
focusClass: "focus_box", //列表选样式中
markCalss: "mark_box", //高亮样式
autoClass: false,
textHint: true //提示文字自动隐藏
});
</script>

还有点css,这个可能需要大家自己修改成自己想要的色调

<!-- 邮箱自动提示的css -->
 <style type="text/css">
  .out_box{border:1px solid #ccc; background:#fff; font:12px/20px Tahoma;}
  .list_box{border-bottom:1px solid #eee; padding:0 5px; cursor:pointer;}
  .focus_box{background:#f0f3f9;}
  .mark_box{color:#c00;}
 </style>

以上就是jquery实现邮箱自动填充提示功能的全部代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
如何提高javascript加载速度
Dec 26 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 #Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 #Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 #Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 #Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 #Javascript
js全选按钮的实现方法
Nov 17 #Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 #Javascript
You might like
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jquery使用经验小结
2015/05/20 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python ljust rjust center输出
2008/09/06 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
python读写json文件的简单实现
2017/04/11 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Pandas的Apply函数具体使用
2020/07/21 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
自我鉴定范文
2013/11/10 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书