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 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
javascript event 事件解析
Jan 31 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jquery.validate使用详解
Jun 02 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
vue实现简单loading进度条
Jun 06 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 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
我的论坛源代码(二)
2006/10/09 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
javascript表单事件处理方法详解
2016/05/15 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
python文件比较示例分享
2014/01/10 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
基于python3的socket聊天编程
2020/02/17 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
物流管理专业毕业生求职信
2014/03/23 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS