实现163收件人显示效果支持编辑删除,自动提示及邮件地址验证
来源：互联网 发布：高清网络摄像机软件 编辑：程序博客网 时间：2024/05/19 04:27
结合autocomplete自写的一个小插件,实现163收件人显示效果支持编辑删除,自动提示及邮件地址验证。
有个关键就是修改了autocomplete.js中在鼠标点击时添加了阻止默认事件e.preventDefault()
插件名：jquery.inputemail.js ,源码如下：
/* * 实现163收件人效果 * 作者：甜甜老爸 */(function ($) { $.fn.inputemail = function (options) {//options 参数 var defaultVal = { mails: "", tipdata: [{full_name: 'ceshi1', email: 'ceshi1@21gmail.com'}, { full_name: 'ceshi2', email: 'ceshi2@21gmail.com' }] }; //默认值 var obj = $.extend(defaultVal, options); return this.each(function () { var $this = $(this);//获取当前对象 initmail(); //初始化事件 function initmail() { if (obj.mails != "") { $this.find(".lg-editableAddr").remove(); $.each(obj.mails.split(","), function (b, q) { q = q.replace(/</, '<').replace(/>/, '>'); var err = ""; var firstsub = q.substring(0, 4); var lastsub = q.substring(q.length - 4); if (firstsub == "<" && lastsub == ">") { q = q.replace(/</, '').replace(/>/, ''); } if (!checkemail(q)) { err = "lg-error"; } $this.append($('<div class="lg-editableAddr ' + err + '"><span class="edminfo">' + q + '</span><b class="edmclose">x</b></div>')); }); var $eminfo = $('<div class="edm-addr">' + '<input type="text" class="edm-input" aria-label="收件人地址输入框，请输入邮件地址，多人时地址请以分号隔开">' + '<span class="edm-addr-txt"></span></div>'); $this.find(".edm-addr").remove(); $this.append($eminfo); $this.find(".edm-input").focus(); getresult(); } else { $this.find(".lg-editableAddr").remove(); $this.find(".lastresult").val(""); } initclick(); inputkeyup(); inputprompt(); } function initclick() { $this.unbind('click').click(function (e) { e.stopPropagation(); if (!$this.find(".edm-input").is(':focus')) { var $eminfo = $('<div class="edm-addr">' + '<input type="text" class="edm-input" aria-label="收件人地址输入框，请输入邮件地址，多人时地址请以分号隔开">' + '<span class="edm-addr-txt"></span></div>'); var xs = e.offsetX + $(this).offset().left; var ys = e.offsetY + $(this).offset().top; //console.log(xs + "," + ys + "点击的位置") var isz = 0; $this.find(".lg-editableAddr").each(function () { // console.log($(this).offset().left + "," + ($(this).offset().top + 23)) var lgx = $(this).offset().left; var lgy = $(this).offset().top + 23; if (lgx > xs && lgy > ys) { isz = 1; $this.find(".edm-addr").remove(); $eminfo.insertBefore(this); $this.find(".edm-input").focus(); return false; } }); if (isz == 0) { $this.find(".edm-addr").remove(); $this.append($eminfo); $this.find(".edm-input").focus(); } } inputkeyup(); inputprompt(); }); $this.find(".edminfo").unbind('click').click(function (e) { e.stopPropagation(); $this.find(".edminfo").removeClass("edmactive"); $(this).addClass("edmactive"); }); $this.find(".edminfo").unbind('dblclick').dblclick(function (e) { var v = $(this).html(); var $eminfo = $('<div class="edm-addr">' + '<input type="text" class="edm-input" value="' + v + '" aria-label="收件人地址输入框，请输入邮件地址，多人时地址请以分号隔开">' + '<span class="edm-addr-txt">' + v + '</span></div>'); $this.find(".edm-addr").remove(); $eminfo.insertAfter($(this).parent()); $(this).parent().remove(); $this.find(".edm-input").width($this.find(".edm-addr-txt").width() + 20); var t = $this.find(".edm-input").val(); $this.find(".edm-input").val("").focus().val(t); getresult(); inputkeyup(); inputprompt(); }); $this.find(".edmclose").unbind('click').click(function (e) { e.stopPropagation(); $(this).parent().remove(); $this.find(".edm-addr").remove(); getresult(); inputkeyup(); inputprompt(); }); } //input事件 function inputkeyup() { $this.find(".edm-input").unbind('keydown').bind('keydown', function (e) { var thisone=$(this); var $edtxt = $this.find('.edm-addr-txt'); if (e.type == 'keydown' && e.keyCode == 8) { var preval = $edtxt.html(); if (preval == "") { var classname=thisone.parent().prev()[0].className; if(classname!="lastresult"){ thisone.parent().prev().remove(); } } getresult(); } }); $this.find(".edm-input").unbind('keyup blur').bind('keyup blur', function (e) { var a=0; var thisone=$(this); var v = thisone.val(); if (v.indexOf('<')>0) { v = v.replace(/</g, '<').replace(/>/g, '>'); } v = v.replace(/;/g, ','); v = v.replace(/</g, '<').replace(/>/g, '>'); var $edtxt = $this.find('.edm-addr-txt'); $edtxt.html(v); console.log($(".ac_results").is(":hidden")) if (v != "") { if (e.keyCode == 13 || e.type == 'blur') { var firstsub = v.substring(0, 4); var lastsub = v.substring(v.length - 4); if (firstsub == "<" && lastsub == ">") { v = v.replace(/</g, '').replace(/>/g, ''); } // if ($(".ac_results").is(":hidden") || $(".ac_results").length<1) { if (a==0){ var z=v.substring(v.length-1); if (z==","){ v=v.substring(0,v.length-1); } $.each(v.split(","),function(b,q){ //console.log(q) var err = ""; if (!checkemail(q)) { err = "lg-error"; } var $onemail = $('<div class="lg-editableAddr ' + err + '"><span class="edminfo">' + q + '</span><b class="edmclose">x</b></div>'); $onemail.insertBefore(thisone.parent()); }); $this.find(".edm-addr").width(20); //$this.find(".edm-addr").remove(); // } a++; } thisone.val(''); $edtxt.html(""); getresult(); } initclick(); } // //if (e.type == 'keyup' && e.keyCode == 8) { // var preval = $edtxt.html(); // if (preval == "") { // thisone.parent().prev().remove(); // } // getresult(); //} if (e.keyCode !=undefined) { thisone.width($edtxt.width() + 20); } }); } //赋值结果 function getresult() { var lastval = ""; $this.find('.edminfo').each(function () { var hsclass = $(this).parent().hasClass('lg-error'); if (!hsclass) { lastval += $.trim($(this).html()) + ","; } }); lastval = lastval.substring(0, lastval.length - 1); lastval = lastval.replace(/</g, '<').replace(/>/g, '>'); $this.find(".lastresult").attr("value", lastval); } //检查邮件地址 function checkemail(val) { var realmail = $.trim(val); if (realmail.indexOf(",") > 0) { return false; } if(realmail.split("<").length>2){ return false; } if(realmail.indexOf(">")>0){ if(realmail.substring(realmail.length - 4,realmail.length)!=">"){ return false; } } var regstart = /<(.*?)>/; var email = regstart.exec(realmail); if (email != null) { realmail = email[1]; } var regx = /^\w+([\.\'-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; return regx.test(realmail); } //输入提示 function inputprompt() { $(".ac_results").remove(); var data = obj.tipdata; $this.find(".edm-input").autocomplete(data, { minChars: 1, width: 300, scroll: true, multipleSeparator: "", scrollHeight: 200, selectFirst:true, matchContains: true, autoFill: false, formatItem: function (item) { if (item.full_name != "" && item.full_name != null && item.full_name != undefined) { return item.full_name + "<" + item.email + ">"; } return item.email; }, formatMatch: function (row, i, max) { return row.full_name + "<" + row.email + ">"; }, formatResult: function (item) { if (item.full_name != "" && item.full_name != null && item.full_name != undefined) { return item.full_name + "<" + item.email + ">"; } return item.email; } }) .result(function (event, item) { $(this).blur(); }); } }); }})(jQuery);样式文件 app.css,如下：
body{ margin: 0;padding: 0; font-family: "Microsoft Yahei"; font-size: 12px;}.lg-emailcontainer{ width: 100%;line-height: 30px;min-height: 30px; overflow: hidden; border:1px solid #ddd; cursor: text}.lg-editableAddr{ float: left;margin-left: 8px;}.edminfo{ background-color:#e8f0f7;padding: 2px 5px; border:1px solid #ddd; cursor: pointer;}.edmclose{background-color:#e8f0f7;padding: 2px 5px; color: #999; border:1px solid #ddd; margin-left: -1px; cursor: pointer;}.edminfo:hover, .edmclose:hover{ background-color:#9ACCFB;}.lg-editableAddr .edmactive{background-color:#2d59b3; color: #fff}.edm-addr{float:left; margin-left: 2px;}.edm-input{border:none; padding: 2px 5px; width: 10px; outline: none;}.edm-addr-txt{ display: none;}.lg-error .edminfo{ background-color:#cf3300; color: #fff; }.lg-error .edmclose{ background-color:#ffeaea; color: #cc3300;}
html文件 index.html 如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实现收件人效果</title> <link rel="stylesheet" href="css/app.css" /> <link rel="stylesheet" href="css/jquery.autocomplete.css" /></head><body><br><div id="email1" class="lg-emailcontainer"> <input type="hidden" class="lastresult"></div><script src="js/jquery.min.js"></script><script src="js/jquery.autocomplete.min.js"></script><script src="js/jquery.inputemail.js"></script><script> //初始值参数 var mails="初始1<woaini520@21gmail.com>,初始2<4523434@qq.com>,hello.ye@gmail.com"; //联想邮件地址参数 var data = [{full_name:'测试1', email:'ceshi1@21gmail.com'}, {full_name:'测试12', email: 'ceshi2@163.com'},{full_name:'测试13', email:'ceshi3@21gmail.com'}, {full_name:'测试14', email: 'ceshi4@21gmail.com'},{full_name:'测试15', email:'ceshi5@21gmail.com'}, {full_name:'测试16', email: 'ceshi6@21gmail.com'}]; $("#email1").inputemail({ mails:mails, tipdata:data });</script></body></html>
1 0
- 实现163收件人显示效果支持编辑删除,自动提示及邮件地址验证
- 仿163填写邮件地址自动显示下拉
- EXT实现邮件地址输入效果
- 修改select2实现163邮箱收件人输入的效果
- AutoCompleteTextView实现邮件地址自动填充
- 邮箱收件人效果（自动填充）
- 自动提示效果,支持ff,ie,opera
- 仿163填写邮件地址自动显示下拉（无优化版）
- Word二次开发--用户编辑时自动显示提示窗口
- 使用ajax实现自动提示效果
- 实现网页背景变暗，显示信息提示效果!
- 实现网页背景变暗，显示信息提示效果!
- js实现表单实时验证，显示提示
- js提示邮件地址功能
- JS验证邮件地址
- C# 如何验证邮件地址
- js邮件地址验证
- javascript 验证邮件地址等
- hpuoj--校赛--爬楼梯（模拟）
- 周总结
- 一个程序猿成长记：设置select的selected属性
- POJ 2376Cleaning Shifts
- Java递归应用：输出树形菜单
- 实现163收件人显示效果支持编辑删除,自动提示及邮件地址验证
- C和指针4.5
- 黑马程序员--Eclipse的基本操作（我们的课堂练习）
- PHP-校花评选-埃洛等级分系统(Elo rating system)
- 学一个人要尊重她的事业，她的朋友，她的一切。
- 关于proteus闪退问题
- CodeForces 498A-Crazy Town-简单计算几何
- 100Same Tree
- Android进程与线程基本知识
