----完整版!(第一天没写完,莫名其妙发出去了)
需求描述:
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,"<");
b=b.replace(/>/g,">");
if (b.indexOf('<') > -1) {
name = b.split('<')[0];
dizhi = b.split('<')[1].replace(">", "");
}
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 + '<' + dizhi + '>"><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"));