多个收件人的字段

时间:2016-09-30 09:08:58

标签: javascript jquery html css3

我想创建一个本身包含其他元素的字段。类似于向社交网络中的多个用户发送消息。 Example

我试图探索代码,但它太混乱了。如果有人分享他的经验和材料,我将不胜感激。

<div class="input_fields_wrap">
<button class="add_field_button">Add Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>

$(document).ready(function() {
    var max_fields      = 10; 
    var wrapper         = $(".input_fields_wrap"); 
    var add_button      = $(".add_field_button"); 

    var x = 1;
    $(add_button).click(function(e){ 
        e.preventDefault();
        if(x < max_fields){ 
            x++; 
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); 
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ 
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

Codepen

1 个答案:

答案 0 :(得分:2)

对于你的情况,我认为它将工作Tag-it。您可以找到更多信息: http://aehlke.github.io/tag-it/

享受。