关于技术您现在的位置是:首页 > 关于技术
模拟QQ邮箱多收件人输入功能
2019-06-06 09:54:07 【Javascript】 414 人已围观 0 条评论
简介
我们都发过邮件,在填写收件人的时候是可以同时填多个收件人的,那么在我们前端页面上用到这个功能的话要怎么实现呢? […]
我们都发过邮件,在填写收件人的时候是可以同时填多个收件人的,那么在我们前端页面上用到这个功能的话要怎么实现呢?今天就简单模拟一下QQ邮箱收件人的填写功能。
话不多说,直接上主要代码:
HTML
<div class="wd_config_group clearfix"> <label class="wd_config_tip fl">收件地址:</label> <div class="input_area fl clearfix" id="in_box" onclick="getFocus();"> <div class="mail_input fl"> <input type="email" class="inputMailList" id="inputMailList" name="email" autocomplete="off"> </div> </div> <span id="ruler"></span> </div>
CSS
/*邮箱自动填充*/ .input_area{ position: relative; padding: 0 13px 0 5px; width:516px; font-size: 14px; line-height: 30px; border:1px solid #ccc; border-radius:5px; box-sizing: border-box; margin-top: 5px; margin-left: 14px; } .emailist{ border:1px solid #bdbdbd; border-radius: 4px; background-color:#fff; color:#666; font-size:14px; list-style-type:0; padding:0; margin:0; overflow:hidden; } .emailist li{ padding:2px 11px; cursor:pointer; line-height: 20px; } .emailist .on, .emailist li:hover{ background-color:#eee; } .mail_list{ line-height: 20px; cursor: default; max-width: 100%; margin: 5px 0; } .mail_list:hover{ background-color: #e0ecf9; } .mail_list span{ margin: 0 3px; max-width: 100%; word-wrap: break-word; } .selected,.selected:hover{ background-color: #528bcb; color: #fff; } .mail_input{ width: 13px; } .mail_input input{ display: inline-block; width: 100%; border: none; outline: none; font-size: 14px; line-height: 30px; padding: 0 5px; } #ruler { visibility: hidden; white-space: nowrap; position: absolute; left: 0; }
JS
基于jQuery的插件,首先要引入JQ,再引入该插件
/** * 多收件人邮箱自动填充功能 */ (function($) { $.fn.mailAutoComplete = function(options) { var defaults = { className: "emailist", email: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组 zIndex: 99 }; // 最终参数 var params = $.extend({}, defaults, options || {}); // 是否现代浏览器 var isModern = typeof window.screenX === "number", visibility = "visibility"; // 键值与关键字 var key = { "up": 38, "down": 40, "enter": 13, "esc": 27, "tab": 9, "semi_colon": 186, "backspace": 8, "delete": 46 }; // 组装HTML的方法 var fnEmailList = function(input) { var htmlEmailList = '', arrValue = input.value.split("@"), arrEmailNew = []; $.each(params.email, function(index, email) { if (arrValue.length !== 2 || arrValue[1] === "" || email.indexOf(arrValue[1].toLowerCase()) === 0) { arrEmailNew.push(email); } }); $.each(arrEmailNew, function(index, email) { htmlEmailList = htmlEmailList + '<li'+ (input.indexSelected===index? ' class="on"':'') +'>'+ arrValue[0] + "@" + email +'</li>'; }); return htmlEmailList; }; // 显示还是隐藏 var fnEmailVisible = function(ul, isIndexChange) { var value = $.trim(this.value), htmlList = ''; if (value === "" || (htmlList = fnEmailList(this)) === "") { ul.css(visibility, "hidden"); } else { isIndexChange && (this.indexSelected = -1); ul.css(visibility, "visible").html(htmlList); } }; return $(this).each(function() { this.indexSelected = -1; // 列表容器创建 var element = this; var eleUl = $('<ul id="' + params.className + '"></ul>').css({ position: "absolute", marginTop: element.offsetHeight + "px", minWidth: element.offsetWidth - 2, visibility: "hidden", zIndex: params.zIndex }).addClass(params.className).bind("click", function(e) { var target = e && e.target; if (target && target.tagName.toLowerCase() === "li") { $(element).val(target.innerHTML).trigger("input"); fillMail(); $(this).css(visibility, "hidden"); element.focus(); } }); $(this).before(eleUl); // IE6的宽度 if (!window.XMLHttpRequest) { eleUl.width(element.offsetWidth - 2); } // 不同浏览器的不同事件 isModern? $(this).bind("input", function() { fnEmailVisible.call(this, eleUl, true); }): element.attachEvent("onpropertychange", function(e) { if (e.propertyName !== "value") return; fnEmailVisible.call(element, eleUl, true); }); $(document).bind({ "click": function(e) { var target = e && e.target, htmlList = ''; if (target == element && element.value && (htmlList = fnEmailList(element, params.email))) { eleUl.css(visibility, "visible").html(htmlList); } else if (target != eleUl.get(0) && target.parentNode != eleUl.get(0)) { eleUl.css(visibility, "hidden"); } $(".mail_list").removeClass("selected"); }, "keydown": function(e){ var selectedMail = $(".inputMailList").val(); var len = selectedMail.visualLength(); $(".mail_input").css({"width": len + 13 + "px"}); var hasFocus = $(".mail_input").find("input").is(':focus'); if(hasFocus){ if(e.keyCode == key.backspace || e.keyCode == key.delete){ if(selectedMail == ""){ var lastMail = $(".mail_list").last(); if($(".mail_list").hasClass("selected")){ $(".input_area .selected").remove(); }else{ lastMail.addClass("selected"); } } }; if(e.keyCode == key.semi_colon){ e.preventDefault(); // 阻止默认事件(阻止键入;号) } } }, "keyup": function(e) { var eleLi = eleUl.find("li"); if (eleUl.css(visibility) === "visible") { switch (e.keyCode) { case key.up: { element.indexSelected--; if (element.indexSelected < 0) { element.indexSelected = -1 + eleLi.length; } e.preventDefault && e.preventDefault(); break; } case key.down: { element.indexSelected++; if (element.indexSelected >= eleLi.length) { element.indexSelected = 0; } e.preventDefault && e.preventDefault(); break; } case key.enter: { e.preventDefault(); eleLi.get(element.indexSelected) && $(element).val(eleLi.eq(element.indexSelected).html()); fillMail(); eleUl.css("visibility", "hidden"); break; } case key.tab: case key.esc: { eleUl.css("visibility", "hidden"); break; } case key.semi_colon: { fillMail(); eleUl.css("visibility", "hidden"); break; } } if (element.indexSelected !== -1) { eleUl.html(fnEmailList(element)); } }else{ if(e.keyCode == key.semi_colon){ fillMail(); } } } }); var fillMail = function(){ var selectedMail = $(element).val(); $(".mail_input").before("<div class='mail_list fl' onclick='getMail(this);'><span>" + selectedMail + ";</span></div>").css({"width": "13px"}); $(element).val(""); $("#ruler").html(""); eleUl.html(""); } }); }; // 字符串原型上添加方法,获取文字的宽度 String.prototype.visualLength = function() { var ruler = $("#ruler"); ruler.text(this); return ruler[0].offsetWidth; } })(jQuery);
最后是调用插件中邮箱自动提示方法
<script src="jquery-1.10.1.min.js"></script> <script src="mailAutoComplete.js"></script> <script type="text/javascript"> $(document).ready(function(){ // 调用邮箱自动提示方法 $("#inputMailList").mailAutoComplete(); }) function getFocus(){ $("#inputMailList").focus(); } function getMail(obj){ event.stopPropagation(); $(obj).addClass("selected").siblings().removeClass("selected"); getFocus(); } </script>
以上,就简单实现了邮箱多输入功能,具体效果,狠戳这里查看。
这个功能相比QQ邮箱还有一定的差距,我们,加油!
上一篇: socket动态获取实时数据
下一篇: jQuery-Cookie实现不再提示功能
文章评论

点击排行
友情推荐
- 微信公众号:扫描加关注