结合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>
扫一扫
5399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
