/**
* 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 + ','
} else {
$element.css('border', '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>
В настоящее время я сталкиваюсь с некоторыми проблемами при удалении определенной части строки из нескольких электронных писем. Мой текущий подход заключается в замене значения удаленного электронного письма на пустое значение;таким образом, я назначил каждой созданной кнопке удаления уникальное значение идентификатора, чтобы удалить только это конкретное значение. Однако это работает только для последней вставленной электронной почты.
Код в основном из плагина js, который облегчает вставку нескольких писем в поле ввода (кредиты: плагин для нескольких писем Создано Malal91и Азиэль ).