/**
* Created by Malal91 and Haziel
* Select multiple email by jquery.email_multiple
* **/
(function($){
$.fn.email_multiple = function(options) {
let defaults = {
reset: false,fill: false,data: null
};
let settings = $.extend(defaults,options);
let email = "";
return this.each(function()
{
$(this).after(
"<div class=\"all-mail\"></div>\n" +
"<input type=\"text\" name=\"email\" class=\"enter-mail-id\" placeholder=\"Enter Email ...\" />"
);
let $orig = $(this);
let $element = $('.enter-mail-id');
$element.keydown(function (e) {
$element.css('border','');
if (e.keyCode === 13 || e.keyCode === 32) {
let getvalue = $element.val();
if (/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/.test(getvalue)){
$('.all-mail').append('<span class="email-ids">' + getvalue + '<span class="cancel-email">x</span></span>');
$(".cancel-email").attr("id",getvalue);
$element.val('');
email += getvalue + ','
} else {
$element.css('border','1px solid red')
}
}
$orig.val(email.slice(0,-1))
});
$(document).on('click','.cancel-email',function(){
//crucial part
var valueToDelete = $(this).attr('id');
//alert(valueToDelete);
var current_value = $('#employee_email').val();
var new_value = current_value.replace(valueToDelete,'');
$('#employee_email').val(new_value);
$(this).parent().remove();
});
if(settings.data){
$.each(settings.data,function (x,y) {
if (/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/.test(y)){
$('.all-mail').append('<span class="email-ids">' + y + '<span class="cancel-email">x</span></span>');
$element.val('');
email += y + ','1px solid red')
}
})
$orig.val(email.slice(0,-1))
}
if(settings.reset){
$('.email-ids').remove()
}
return $orig.show()
//return $orig.hide()
});
};
})(jQuery);span.email-ids {
float: left;
/* padding: 4px; */
border: 1px solid #ccc;
margin-right: 5px;
margin-bottom: 5px;
background: #f5f5f5;
padding: 3px 10px;
border-radius: 5px;
}
span.cancel-email {
border: 1px solid #ccc;
width: 18px;
display: block;
float: right;
text-align: center;
margin-left: 20px;
border-radius: 49%;
height: 18px;
line-height: 15px;
margin-top: 1px; cursor: pointer;
}
.email-id-row {
border: 1px solid #ccc;
}
.email-id-row input {
border: 0; outline:0;
}
span.to-input {
display: block;
float: left;
padding-right: 11px;
}
.email-id-row {
padding-top: 6px;
padding-bottom: 7px;
/*margin-top: 23px;*/
}<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input class="input_link" id="employee_email" type="text" placeholder="test field - see result" />
<script type="text/javascript">
//let user insert multiple emails
$(document).ready(function($){
let data = []
$("#employee_email").email_multiple({
data: data
})
});
</script>
</body>
</html>
我目前在删除多封电子邮件的字符串中的某些部分时遇到了一些问题。我目前的方法是将已删除电子邮件的值替换为空值。因此，我为每个创建的删除按钮分配了唯一的ID值，以便仅删除此特定值。但是，这仅适用于最后插入的电子邮件。
该代码主要来自js插件，该插件使在输入字段中插入多封电子邮件变得更加容易（贷方：multiple email plugin Created by Malal91 and Haziel）。