Question

我正在处理一个允许用户在输入字段中输入多个电子邮件地址的表单。

通过搜索网络，我浏览了这个jQuery插件： http://t2a.co/blog/index.php/multiple-value-input-field-with-jquery/

{{1}}

我安装了插件，下面是我的结果截图：

我的问题：

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

这是一个小提琴：https://jsfiddle.net/William3780/oL14dgqp/

以下是我正在处理的实时安装的链接：http://51146.com/free/refer-a-friend/ *请填写“朋友的电子邮件”字段并提交表单以查看问题。

非常感谢您的意见，谢谢。

Answer 1

很好地改变了你的代码标准，但创建了一个有效的多个电子邮件输入。这是代码

<强> HTML

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

<强> 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();
        });

Answer 2

JSFiddle将不胜感激，但如果您尝试删除String中数组的最后一个元素或项目数组的逗号。我可以想象一些方法：

1）正则表达式

var lastCommaPatter = ",$";

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

email.replace(lastCommaPatter, "");

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);

}

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

2 个答案: