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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
用vue 实现手机触屏滑动功能
May 28 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
OpenLayers3实现地图显示功能
Sep 25 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防盗链的常用方法小结
2010/07/02 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PHP实现简单日历类编写
2020/08/28 PHP
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
教师实习自我鉴定
2013/12/11 职场文书
校长先进事迹材料
2014/02/01 职场文书
大型会议策划方案
2014/05/17 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
拾金不昧感谢信
2015/01/21 职场文书
泰山导游词
2015/02/02 职场文书
2015年数学教研工作总结
2015/07/22 职场文书