Javascript jQuery-输入字段中有多个电子邮件地址

我正在开发一个表单，允许用户在一个输入字段中输入多个电子邮件地址

通过搜索此jQuery插件的网络I cam：

（函数（$）{
$.fn.multipleInput=函数（）{
返回此值。每个（函数（）{
//创建html元素
//作为无序列表的电子邮件地址列表
$list=$（“
”）；
//输入
var$input=$（''）.keyup（函数（事件）{
if（event.which==32 | | event.which==188）{
//按键是空格还是逗号
var val=$（this.val（）.slice（0，-1）；//从值中删除空格/逗号
//使用“删除”按钮附加到电子邮件列表
$list.append（$（'
'+val+'
'））
.append（$（'

我的问题：

我们如何编辑插件以确保最后一个值（电子邮件地址）的末尾没有逗号

这是一把小提琴：

这里是我正在进行的实时安装的链接：*请填写“朋友的电子邮件”字段并提交表格以查看问题

非常感谢您的输入。
JSFiddle将不胜感激，但如果您试图删除数组或字符串中项目数组最后一个元素的逗号。我可以想象以下几种方法：

1） 正则表达式

2） 将整个内容转换为集合并删除最后一个空白元素

var SEPARATOR = ",";

var emails = "test@gmail.com, test2@gmail.com, test@gmail.com,";

var emailsCollection = email.split(SEPARATOR);

var collectionSize = emailsCollection.length;

if(collectionSize > 0){

  array.splice(emailsCollection, collectionSize - 1);

}

对你的代码标准做了一点修改，但创建了一个可工作的多电子邮件输入

HTML

<div class="multiple-val-input">
    <ul>
        <input type="text">
        <span class="input_hidden"></span>
    </ul>
</div>

JQUERY

$('.multiple-val-input').on('click', function(){
            $(this).find('input:text').focus();
        });
        $('.multiple-val-input ul input:text').on('input propertychange', function(){
            $(this).siblings('span.input_hidden').text($(this).val());
            var inputWidth = $(this).siblings('span.input_hidden').width();
            $(this).width(inputWidth);
        });
        $('.multiple-val-input ul input:text').on('keypress', function(event){
            if(event.which == 32 || event.which == 44){
                var toAppend = $(this).val();
                if(toAppend!=''){
                    $('<li><a href="#">×</a><div>'+toAppend+'</div></li>').insertBefore($(this));
                    $(this).val('');
                } else {
                    return false;
                }
                return false;
            };
        });
        $(document).on('click','.multiple-val-input ul li a', function(e){
            e.preventDefault();
            $(this).parents('li').remove();
        });

$（'.multiple val input'）。在（'click'，function（）上{
$（this.find（'input:text'）.focus（）；
});
$（'.multiple-val-input-ul-input:text'）。在（'input-propertychange'，function（）上{
$（this）.sides（'span.input_hidden'）.text（$（this.val（））；
var inputWidth=$（this）.sillides（'span.input_hidden'）.width（）；
$（此）.width（inputWidth）；
});
$（'.multiple-val-input-ul-input:text'）。on（'keypress'，函数（事件）{
if（event.which==32 | | event.which==44）{
var toAppend=$（this.val（）；
如果（出现！=''）{
$（“
”+toAppend+”
）。在（$（this））之前插入；
$（this.val（“”）；
}否则{
返回false；
}
返回false；
};
});
$（文档）。在（'单击'，'上。多个val输入ul li a'，函数（e）{
e、 预防默认值（）；
$（this.parents（'li'）.remove（）；
});
JsFiddle会很有用。在第一张图像中有类似于
标记的东西。因此，当你得到它时，将分离的值恢复到它的形式？因为我已经创建了一个标签，我可以看到，一旦你点击
，
，你就会得到类似标记的UI，而我没有找到其他选项将其恢复到
，
分离的值。问题应该是
emails.push（$input.val（））；
。如果将空值推送到数组中，最好检查
input.val（）！=“”
然后将其推入数组。您可能会看到这个示例。您可以清楚地看到它将一个空字符串推入数组。使用JSFIDLE和到实时安装的链接更新了问题。感谢您的反馈，您能告诉我如何将您的建议实施到插件中吗？您应该告诉我您的建议的具体部分我的代码示例希望存在的代码。否则，我无法轻松指出必须在源代码中实现这一点。
<div class="multiple-val-input">
    <ul>
        <input type="text">
        <span class="input_hidden"></span>
    </ul>
</div>

.multiple-val-input{
        height: auto;
        min-height: 34px;
        cursor: text;
    }
    .multiple-val-input ul{
        float: left;
        padding: 0;
        margin: 0;
    }
    .multiple-val-input ul li{
        list-style: none;
        float: left;
        padding: 3px 5px 3px 5px;
        margin-bottom: 3px;
        margin-right: 3px;
        position: relative;
        line-height: 13px;
        cursor: default;
        border: 1px solid #aaaaaa;
        border-radius: 3px;
        -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
        box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
        background-clip: padding-box;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #e4e4e4;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
        background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
        background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
        background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
    }
    .multiple-val-input ul li a{
        display: inline;
        color: #333;
        text-decoration: none;
    }
    .multiple-val-input ul li a, .multiple-val-input ul li div{
        display: inline;
        margin-left: 3px;
    }
    .multiple-val-input input[type="text"]{
        float: left;
        border: none;
        outline: none;
        height: 20px;
        min-width: 5px;
        width: 5px;
    }
    .multiple-val-input span.input_hidden{
        font-size: 14px;
        position: absolute;
        clip: rect(0,0,0,0);
    }

$('.multiple-val-input').on('click', function(){
            $(this).find('input:text').focus();
        });
        $('.multiple-val-input ul input:text').on('input propertychange', function(){
            $(this).siblings('span.input_hidden').text($(this).val());
            var inputWidth = $(this).siblings('span.input_hidden').width();
            $(this).width(inputWidth);
        });
        $('.multiple-val-input ul input:text').on('keypress', function(event){
            if(event.which == 32 || event.which == 44){
                var toAppend = $(this).val();
                if(toAppend!=''){
                    $('<li><a href="#">×</a><div>'+toAppend+'</div></li>').insertBefore($(this));
                    $(this).val('');
                } else {
                    return false;
                }
                return false;
            };
        });
        $(document).on('click','.multiple-val-input ul li a', function(e){
            e.preventDefault();
            $(this).parents('li').remove();
        });