js仿QQ邮箱收件人选择与搜索功能


Posted in Javascript onFebruary 10, 2017

之前因为项目开发需要,对于收件人选择与搜索的js实现,整理如下:

页面截图:

js仿QQ邮箱收件人选择与搜索功能

主要html代码:

<#--左侧-->
<div>
 <label>To:</label>
 <div id="divtxt" class="mailtxt_div"></div>
 <input type="hidden" name="messName" id="messName"/>
 <input type="hidden" name="messId" id="messId"/>
</div>
<div>
 <label>Subject:</label>
 <input type="text" name="messTitle" id="messTitle"/>
</div>
<div>
 <label>Message:</label>
 <textarea name="ddContent" id="ddContent"></textarea>
</div>
<#--右侧-->
<div>
 <input calss="search_mail" type="text" value="Search Contact..." onclick="if(this.value==
'Search Contact...')this.value='';" onblur="if(this.value=='')this.value='Search Contact...';" 
name="txtsearch" />
 <div><img src="/images/email03.png" /></div>
</div>
<div class="mailclist">
 <ul>
  <li>
   <div class="firstmail" title="Cata food, S.L." alt="aa@qq.com" 
    ass="Cata food, S.L.">Cata food, S.L.</div>
  </li>
  <li>
   <div class="firstmail" title="Anqing Beverage" alt="bb@qq.com" 
    ass="Anqing Beverage">Anqing Beverage</div>
  </li>
  <li>
   <div class="firstmail" title="123456ew" alt="cc@qq.com" 
    ass="123456ew">123456ew</div>
  </li>
 </ul>
</div>

主要js实现代码:

<script type="text/javascript">
$(function(){  
 //点击收件人列表到收件人
  $(".firstmail").bind("click",function(){
   var $mailTo=$(this).attr("ass");//收件人名称
   var $mailToId=$(this).attr("alt");//收件人Id
   var $divtxt_val=$("#divtxt").text();//收件人框中的值
   var $messId=$("#messId").val();//隐藏的收件人Id
   if($divtxt_val.indexOf($mailTo)<0){//若不存在,则拼接
    $("#divtxt").append("<span class='rece' alt='"+$mailToId+";'>"
    +$mailTo+";"+"</span>");
    $messId=$messId+$mailToId+";";
   }
   $("#messId").val($messId);
   $("#messName").val($("#divtxt").text());//隐藏的收件人名称
  });
  
  //点击某个收件人,添加样式
   $(".rece").live("click",function(){
    $("#divtxt").find(".rece").removeClass("on");
    $("#divtxt").find(".rece").css("background-color","").css("color","")
    $(this).addClass("on").css("background-color", "#545f59").css("color","#fff");
   });
  
  //点击删除键跟退格键,删除对应的收件人
  $(document).bind('keydown',
  function(event) {
    var $messId=$("#messId").val();//收件人Id的值
    var $span_alt=$("#divtxt .on").attr("alt");//选中的收件人
    if($span_alt != null){
    var $index,$span_size,$mess_size,$val;
    $index=$messId.indexOf($span_alt);
    $span_size=$span_alt.length;
    $mess_size=$messId.length;
    //删除对应的收件人Id
    $val=$messId.substring(0,$index)
     +$messId.substring($index+$span_size,$mess_size);
    $("#messId").val($val);
    if(46==event.keyCode ){ //Delete键    
     $("#divtxt .on").remove();
     $("#messName").val($("#divtxt").text());    
    }else if(8==event.keyCode){//退格键
     $("#divtxt .on").remove();
     $("#messName").val($("#divtxt").text());
     return false;
    }
   }  
  }
 );
 
 //搜索框搜索事件
 $(".search_mail").bind("blur",function(){
   var content = $(this).val();
   if("Search Contact..." != content && content !=""){
    $(".mailclist li div").each(function(){
     var name = $(this).text();
     if(name.indexOf(content) == -1){
      $(this).hide();
     }else{
      $(this).show();
     }
    });
   } else {
    $(".mailclist li div").show();
   }
  });
});
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
优化JavaScript脚本的性能的几个注意事项
Dec 22 Javascript
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
详解vue-cli3使用
Aug 14 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
BootStrapValidator初使用教程详解
Feb 10 #Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 #Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 #Javascript
JS实现的数字格式化功能示例
Feb 10 #Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 #Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 #Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 #Javascript
You might like
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Python在图片中添加文字的两种方法
2017/04/29 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python实现杨氏矩阵查找
2019/03/02 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
安装python及pycharm的教程图解
2019/10/10 Python
Python3运算符常见用法分析
2020/02/14 Python
tensorflow 实现数据类型转换
2020/02/17 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
企业内部培训方案
2014/02/04 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
合伙协议书
2014/04/23 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
小学教育见习总结
2015/06/23 职场文书
学校运动会感想
2015/08/10 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python