【发布时间】：2015-09-30 08:12:24
【问题描述】：
我正在开发一种允许用户在输入字段中输入多个电子邮件地址的表单。
通过在网上搜索，我发现了这个 jQuery 插件： http://t2a.co/blog/index.php/multiple-value-input-field-with-jquery/
(function( $ ){
$.fn.multipleInput = function() {
return this.each(function() {
// create html elements
// list of email addresses as unordered list
$list = $('<ul />');
// input
var $input = $('<input type="text" />').keyup(function(event) {
if(event.which == 32 || event.which == 188) {
// key press is space or comma
var val = $(this).val().slice(0, -1); // remove space/comma from value
// append to list of emails with remove button
$list.append($('<li class="multipleInput-email"><span> ' + val + '</span></li>')
.append($('<a href="#" class="multipleInput-close" title="Remove" />')
.click(function(e) {
$(this).parent().remove();
e.preventDefault();
})
)
);
$(this).attr('placeholder', '');
// empty input
$(this).val('');
}
});
// container div
var $container = $('<div class="multipleInput-container" />').click(function() {
$input.focus();
});
// insert elements into DOM
$container.append($list).append($input).insertAfter($(this));
// add onsubmit handler to parent form to copy emails into original input as csv before submitting
var $orig = $(this);
$(this).closest('form').submit(function(e) {
var emails = new Array();
$('.multipleInput-email span').each(function() {
emails.push($(this).html());
});
emails.push($input.val());
$orig.val(emails.join());
});
return $(this).hide();
});
};
})( jQuery );
我安装了插件，下面是我的结果截图：
我的问题：
我们如何编辑插件以确保最后一个值（电子邮件地址）的末尾没有逗号？
这是一个小提琴：https://jsfiddle.net/William3780/oL14dgqp/
这里是我正在处理的实时安装的链接：http://51146.com/free/refer-a-friend/ *请填写“朋友的电子邮件”字段并提交表单以查看问题。
非常感谢您的意见，谢谢。
【问题讨论】：
-
JsFiddle 会很有用。
-
第一张图片中有类似
tag的内容。那么当你得到这个，分离的值回到它的形式？由于我创建了一个 demo，我可以看到，一旦您单击,，您就会得到类似 UI 的标签，但我没有找到其他选项可以将其恢复为,分隔值.. -
问题应该是
emails.push($input.val());。它将一个空值推送到数组中，最好检查input.val() != ""然后将其推送到数组中。 -
你可能会看到这个例子。 jsfiddle.net/h3g3gLf8 可以清楚的看到它把一个空字符串压入了数组中。
-
使用 jsFiddle 和实时安装链接更新了问题。
标签： javascript jquery html