Question

我不是专家，但是我正在尝试实现一个文本字段，该文本字段可以输入多个用分号分隔的电子邮件，这是可行的，但是我正在尝试更改设计，但是我不知道为什么它没有给我我想要的输出

html

<input id="try" name="try" type="text" size="" value="" maxlength=""   />

css

.multipleInput-container {
     padding:1px;
     padding-bottom:0;
     cursor:text;
     font-size:15px;
     width:100%;
     height: 20px;
      border-radius: 6px
}

.multipleInput-container input {
    font-size:15px;
    clear:both;
    height:30px;
    border:1px black solid;
    margin-bottom:1px;
}

.multipleInput-container ul {
    list-style-type:none;
}

li.multipleInput-email {
    float:left;
    padding:6px ;
    color: #fff;
    background: #FD9160;
    margin-top: 0;
    border-radius: 6px;
    margin: 6px 2px 6px 6px;
}

.multipleInput-close {
    width:16px;
    height:16px;
    display:block;
    float:right;
    margin: -2px 0px 0px 8px;
    color: #fff;
    font-size: 16px;
}

javascript + 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 == 186) {
                         // 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">x</a>')
                                   .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 );

$('#try').multipleInput();

输出是这样的

但是我想像yahoo和google一样

类似于此图片，其中标签在输入字段旁边

当前

期望

使用CSS jQuery JavaScript的多个输入以分号分隔

0 个答案: