javascript jQuery - 输入字段中的多个电子邮件地址
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32861091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Multiple Email Addresses in Input Field
提问by William
I am working on a form that would allow users to enter multiple email addresses in an input field.
我正在开发一个允许用户在输入字段中输入多个电子邮件地址的表单。
By searching around the net I cam across this jQuery plugin: http://t2a.co/blog/index.php/multiple-value-input-field-with-jquery/
通过在网上搜索，我发现了这个 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 );
I installed the plugin, below is a screenshot of my results:
我安装了插件，下面是我的结果截图：
My Questions:
我的问题：
How can we edit the plugin to make sure that the last value (email address) does not have a comma at the end?
我们如何编辑插件以确保最后一个值（电子邮件地址）末尾没有逗号？
Here is a Fiddle: https://jsfiddle.net/William3780/oL14dgqp/
这是一个小提琴：https: //jsfiddle.net/William3780/oL14dgqp/
And here is a link to the live install I am working on: http://51146.com/free/refer-a-friend/*please fill out the "Friends' Emails" field and submit the form to see the issue.
这是我正在处理的实时安装的链接：http: //51146.com/free/refer-a-friend/*请填写“朋友的电子邮件”字段并提交表单以查看问题。
Your input is very much appreciated, thank you.
非常感谢您的意见，谢谢。
回答by Gaurav Aggarwal
well changed little bit of your code standards but created a working multiple email input. Here are the codes
很好地改变了你的代码标准，但创建了一个有效的多电子邮件输入。这里是代码
HTML
HTML
<div class="multiple-val-input">
<ul>
<input type="text">
<span class="input_hidden"></span>
</ul>
</div>
CSS
CSS
.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);
}
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();
});
回答by Jason Marsh
JSFiddle would be appreciated but if you are trying to remove a comma of last element of an array or array of items in a String. I can imagine a few approaches:
JSFiddle 将不胜感激，但如果您尝试删除字符串中数组或项目数组的最后一个元素的逗号。我可以想象几种方法：
1) Regex
1) 正则表达式
var lastCommaPatter = ",$";
var emails = "[email protected], [email protected], [email protected],";
email.replace(lastCommaPatter, "");
2) Coverting entire thing into a collection and remove the last blank element
2）将整个事物覆盖到一个集合中并删除最后一个空白元素
var SEPARATOR = ",";
var emails = "[email protected], [email protected], [email protected],";
var emailsCollection = email.split(SEPARATOR);
var collectionSize = emailsCollection.length;
if(collectionSize > 0){
array.splice(emailsCollection, collectionSize - 1);
}
