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

发布时间:2022-04-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了jquery实现邮箱自动填充提示功能脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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实现邮箱自动填充提示功能的全部代码,希望对大家的学习有所帮助。

脚本宝典总结

以上是脚本宝典为你收集整理的jquery实现邮箱自动填充提示功能全部内容,希望文章能够帮你解决jquery实现邮箱自动填充提示功能所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:邮箱邮箱