jQuery-輸入字段中的多個電子郵件地址

Question

我正在設計一種允許用戶在輸入字段中輸入多個電子郵件地址的表單。

通過在網上搜索，我跨過了這個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/ *請填寫“朋友的電子郵件”字段並提交表格以查看問題。

非常感謝您的輸入，謝謝。

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中的數組或項目數組的最后一個元素的逗號，請使用JSFiddle。 我可以想象幾種方法：

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

}