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 相关文章推荐
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
js 走马灯简单实例
Nov 21 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
vue如何从接口请求数据
Jun 22 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
封装一下vue中的axios示例代码详解
Feb 16 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开发中的错误收集,不定期更新。
2011/02/03 PHP
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python写日志封装类实例
2015/06/28 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
python 正确保留多位小数的实例
2018/07/16 Python
python 自动去除空行的实例
2018/07/24 Python
python实现简单登陆系统
2018/10/18 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
python yield和Generator函数用法详解
2020/02/10 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
超市重阳节活动方案
2014/02/10 职场文书
致接力运动员广播稿
2014/02/17 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
了解Redis常见应用场景
2021/06/23 Redis
HttpClient实现文件上传功能
2022/08/14 Java/Android