兼容ie8及其兼容性视图内网邮箱添加收件人功能

最新推荐文章于 2019-07-03 20:13:16 发布

祝福纱雾荼梻

最新推荐文章于 2019-07-03 20:13:16 发布

阅读量1.2k

点赞数

分类专栏：独立功能

本文链接：https://blog.csdn.net/weixin_41355260/article/details/86715267

版权

独立功能专栏收录该内容

4 篇文章 0 订阅

订阅专栏

----完整版！（第一天没写完，莫名其妙发出去了）

需求描述：

1.兼容IE8及兼容性视图

2.将邮箱地址自动生成标签，如下图

3.用户傻瓜式输入，若通不过正常邮箱正则校验，则为用户自动补全其内网邮箱地址:

//  校验规则
re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;

1）用户输入形如123@qq.com ，系统自动截取@之前的字段作为用户名

2）用户输入形如<test1@qq.com>，则获取test1为用户名，test1@qq.com为邮箱地址

3）如用户输入123，未通过校验，则补全为123@parta.com(parta.com为其内网域名，如果域名为123.com,则补全为123@123.com)

4）如用户输入csdn<test2@gmail.com>，则获取csdn为用户名，test2@gmail.com为邮箱地址

5）如用户输入或粘贴形如123,456@qq.com;<test1@qq.com>；csdn<test2@gmail.com>，xxx;;sssssssss;的字符串则以“,”和“;”为标记切割，忽略两标记之间空白字符，依据1）~4）规则进行补全

4.支持从联系人列表导入地址，支持批量导入（添加一组邮箱地址），若邮箱地址已被添加，高亮标记；若邮箱地址相同，且与已加入的用户名不同，以联系人列表用户名为准

5.支持粘贴批量邮箱地址，通过正则校验的直接生成标签，否则，按照3的规则自动补全为内网邮箱地址

别问我为什么不严格控制用户输入，用户需要，从不按套路出牌，把用户的错误行为最大程度的兼容过来，就是我的任务，哭唧唧~

收件人输入框获取焦点（因为还有抄送和密送功能）

/*input获得焦点，其他item失去选中效果*/
    $('.addr-input').on('focus', function () {
        $('.addr-input').removeClass('item-focus');
        $(this).addClass('item-focus');
    });

封装:添加邮箱地址检验地址是否存在和数据标准化处理

function AddEmail(name, b) {
    var dizhi = b;
    b=b.replace(/</g,"&lt;");
    b=b.replace(/>/g,"&gt;");
    if (b.indexOf('&lt;') > -1) {
        name = b.split('&lt;')[0];
        dizhi = b.split('&lt;')[1].replace("&gt;", "");
    }
    if(name=="")
    {
        name=dizhi.split('@')[0];
    }
    if(name.indexOf('@') > -1)
    {
        name=name.split('@')[0];
    }
    SetWidth(name.length);
    if (isExistEmail(dizhi)) {
        $('.addr-item ').removeClass('item-hover');
        $('<div class="addr-item" title="' + name + '&lt;' + dizhi + '&gt;"><strong class="addr-name">' + name +
            '</strong><em class="addr-email">' + dizhi +
            '</em><a  class="addr-icon remove"><i>x</i></a></div>').insertBefore($('.item-focus'));
        //添加默认域
        var hiddeninput = $('.item-focus').siblings(".f-dn");
        if (hiddeninput.length > 0) {
            //单条回复，隐藏删除按钮
            if (hiddeninput.hasClass("hf")) {
                $(".addr-item i").remove();
            }
            if (hiddeninput.val().length > 0) {
                hiddeninput.val(hiddeninput.val() + ",");
            }
            hiddeninput.val(hiddeninput.val() + name + "<" + dizhi + ">");
        }
    } else {
        $('.item-hover .addr-name').text('').text(name);//覆盖原来的用户名
        $('.item-hover').prop('title', name + b);//修改title
    };
    //修正地址宽度
    $(".addr-item").css("width", maxemail + "em");
}

封装：判断邮箱地址是否已经存在

//判断邮箱地址是否已经存在于收件人列表
function isExistEmail(eleValue) {
    var result = true,
        eleValue;
    $('.item-focus').parent().find(".addr-email").each(function () {
        if (eleValue.indexOf($(this).text()) != -1) {
            $(this).parent().addClass('item-hover');
            $(this).parent().siblings().removeClass('item-hover');
            result = false;
        }
    });
    return result;
}

封装：标签长度自动设置为同组标签最长长度

//计算写信时的标签长度
function SetWidth(w) {
    if (w + 16 > maxemail) {
        maxemail = w + 16;
        if (maxemail < 21) {
            maxemail = 21;
        }
    }
    return maxemail;
}

从收件人输入框添加邮箱地址，失去焦点、粘贴触发、键盘空格键、enter键触发时，生成标签

 /*失去焦点，如果字符不为空且不重复，*/
    $('.addr-input').on('blur postpaste', function () {
        var txt = "";
        var email = "";
        var text = $(this).val(),
            re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        if (text.length > 1) {   
        
            //开始我的思路是判断是否含有;，没有的话，直接正则校验切割出用户名和地址生成标签
            //有的话，再判断是否含有,,若有将其替换成;,遍历切割，生成用户名、地址，拼出标签
            //后来老司机优化了我的代码，
            //不管是否存在;和,，直接遍历用户输入，直接替换
            //减去直接判断是否存在,和;的两次循环判断和一次条件判断
            //将用户输入的,替换为;

            text=text.replace(/,/g,";");
            var str=text.split(";");
            $.each(str,function(i,value){
                if(value!="")
                {
                    email = value;
                    txt = value;
                    if (!re.test(value)&& email.indexOf('@')==-1) {
                        email = value + "@" + $('input[name="maildomain"]').val();
                    }
                    AddEmail(txt, email);
                }
            });
        }
        $(this).val("");
    })
        .pasteEvents()
        .on('keydown', function (e) {
            if (e.keyCode == 13 || e.keyCode == 32) {
                //$(this).blur().val("").focus();//ie不兼容，chrome可用
                var txt = "";
                var email = "";
                var text = $(this).val(),
                    re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                if (text.length > 1) {
                    text=text.replace(/,/g,";");
                    var str=text.split(";");
                    $.each(str,function(i,value){
                        email = value;
                        txt = value;
                        if (!re.test(value)&& email.indexOf('@')==-1) {
                            email = value + "@" + $('input[name="maildomain"]').val();
                        }
                        AddEmail(txt, email);
                    });
                }
                $(this).val("");
            }
        });

重写：粘贴板立即响应 https://www.cnblogs.com/dreamzhiya/p/5130919.html

// 粘贴事件监控
    $.fn.pasteEvents = function( delay ) {
        if (delay == undefined) delay = 10;
        return $(this).each(function() {
            var $el = $(this);
            $el.on("paste", function() {
                $el.trigger("prepaste");
                setTimeout(function() { $el.trigger("postpaste"); }, delay);
            });
        });
    };

//触发paste
$('.addr-input').pasteEvents()

获取联系人列表，使用ztree.js

    $('.area-header').click(function(){
        if ($("#tree1").length > 0) {
            var setting1 = {
                async: {
                    enable: true,
                    url: "/ggdzb.nsf/ggdzbjson?OpenAgent",
                    autoParam: ["id", "level=lv"],
                    otherParam: { "viewname": "managejd1" },
                    dataFilter: filter
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: zTreeOnClick
                }
            };
            $.fn.zTree.init($("#tree1"), setting1);
        }
    });

封装:从联系人列表添加收件人联系人列表使用了ztree.js,故此功能的实现依赖ztree.js

//绑定地址
function zTreeOnClick(event, treeId, treeNode) {
    var name = treeNode.name;
    //多地址处理
    $.each(treeNode.mailaddr.split(','), function (a, b) {
        //过滤空地址
        if (b.indexOf('@') == -1) {
            return;
        }
        //多地址处理
        if (treeNode.mailaddr.split(',').length > 1) {
            name = b.split('@')[0];
        }
        AddEmail(name, b);
    })
    $('.item-focus').focus();
};

删除功能点击“X”，删除对应邮箱地址

 /*点击删除按钮，删除当前item*/
    $('.email-addressee').on('click', '.remove', function () {
        var name = $(this).siblings(".addr-name").text();
        var mailaddr = $(this).siblings(".addr-email").text();
        var hiddeninput = $('.item-focus').siblings(".f-dn");
        var sub = hiddeninput.val().replace(name + "<" + mailaddr + ">", "").replace(",,", ",");
        //去掉首，
        if (sub.indexOf(',') == 0) {
            sub = sub.substring(1, sub.length);
        }
        //去掉尾，
        if (sub.substring(sub.length - 1) == ",") {
            sub = sub.substring(0, sub.length - 1);
        }
        hiddeninput.val(sub);
        $(this).parent().remove();
        //修正宽度
        maxemail = 0;
        $.each($(".addr-item"), function () {
            SetWidth($(this).find(".addr-name").text().length);
        });
        //修正地址宽度
        $(".addr-item").css("width", maxemail + "em");
        return false;
    }).on('click', '.addr-item', function () {
        return false;
    }).click(function () {
        $(this).find(".addr-input").focus();
    });

兼容性处理：

1）获取浏览器版本

//浏览器兼容
    function checkBrower() {
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        if (window.ActiveXObject) {
            Sys.ie = ua.match(/msie ([\d.]+)/)[1];
            //获取版本
            var ie_version = 6;
            if (Sys.ie.indexOf("7") > -1) {
                ie_version = 7;
            }
            if (Sys.ie.indexOf("8") > -1) {
                ie_version = 8;
            }
            if (Sys.ie.indexOf("9") > -1) {
                ie_version = 9;
            }
            if (Sys.ie.indexOf("10") > -1) {
                ie_version = 10;
            }
            if (Sys.ie.indexOf("11") > -1) {
                ie_version = 11;
            }
        }
        else if (ua.indexOf("firefox") > -1)
            Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1];
        else if (ua.indexOf("chrome") > -1)
            Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1];
        else if (window.opera)
            Sys.opera = ua.match(/opera.([\d.]+)/)[1];
        else if (window.openDatabase)
            Sys.safari = ua.match(/version\/([\d.]+)/)[1];

        return ie_version;
    }

//调用
 if(checkBrower()==8||checkBrower()==7||checkBrower()==6){...}

2）indexOf兼容IE9-

//indexOf()兼容IE9以下
    if (!Array.indexOf) {
        Array.prototype.indexOf = function (el) {
            for (var i = 0, n = this.length; i < n; i++) {
                if (this[i] === el) {
                    return i;
                }
            }
            return -1;
        }
    }

3）placeholder兼容IE8

function placeholderForIE8($ele) {
    function isPlaceholder() {
        var input=document.createElement("input");
        return "placeholder" in input;
    }
    //判断placeholder是否是input的属性和是否是input的原型属性
    if (isPlaceholder()==false &&!("placeholder" in document.createElement("input"))) {
        $('input[placeholder],textarea[placeholder]').each(function(){
            var $this = $(this),
                textPlaceholder = $this.attr("placeholder");
            if ($this.val() === "") {
                if ($this.attr("name") == "search") {
                    $ele.html("查找联系人");
                } else {
                    $this.val(textPlaceholder).addClass('placeholder');
                }
            }
            $this.focus(function () {
                if ($ele.html() == textPlaceholder) {
                    $ele.html("");
                }
                if ($this.val() === textPlaceholder) {
                    $this.val("").removeClass('placeholder');
                }
            }).blur(function () {
                if ($this.val() === "") {
                    if ($this.attr("name") == "search") {
                        $ele.html("查找联系人");

                    } else {
                        $this.val(textPlaceholder).addClass('placeholder');
                    }
                }
            }).closest('form').submit(function () {
                if ($this.val() === text) {
                    $this.val('');
                }
            });
        });
    }
}


placeholderForIE8($(".search-place"));

祝福纱雾荼梻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容ie8及其兼容性视图内网邮箱添加收件人功能

----完整版！（第一天没写完，莫名其妙发出去了）需求描述：1.兼容IE8及兼容性视图2.将邮箱地址自动生成标签，如下图3.用户傻瓜式输入，若通不过正常邮箱正则校验，则为用户自动补全其内网邮箱地址:// 校验规则re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; ...
复制链接

扫一扫