Question

我对使用自动展开的动态添加文本区域有疑问。我研究了文本区域自动扩展和我的成功。它可以在加载的文本区域中使用但是如何在动态添加文本区域上也可以自动扩展。我使用过keyup事件但它没有成功

此处用于测试Testing Here

//这是我的javascript

$(document).ready(function () {

        //dynamic create mutiple inputbox
        var max_fields = 10; //maximum input boxes allowed
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_field_button"); //Add button ID

        var x = 0; //initlal text box count
        $(add_button).click(function(e) { //on add input button click
            e.preventDefault();
            if (x < max_fields) { //max input box allowed
                x++; //text box increment
                //$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
                $(wrapper).append(

                  '<div class="panel panel-default product_wrapper">'+
                        '<div class="panel-heading">'+
                            '<h4 class="panel-title">'+
                                '<a data-toggle="collapse" href="#product'+x+'">Product'+x+'</a>'+
                            '</h4>'+
                        '</div>' +

                        '<div id="product'+x+'" class="panel-collapse collapse in">'+
                            '<div class="panel-group">'+
                                '<div class="panel panel-default">'+

                                    '<div class="col-lg-12">' +

                                        '<div class="col-lg-3" >' +
                                            '<label>Product</label>' +
                                            '<textarea type="text" class="product_textarea" name="Product[]"></textarea>' +
                                        '</div>' +

                                        '<div class="col-lg-6">' +
                                            '<label>Description</label>' +
                                            '<textarea rows="5"  name="ProductDescription[]"></textarea>' +
                                        '</div>' +

                                        '<div class="col-lg-2 form-group">' +
                                            '<label>Price</label>' +
                                            '<input type="text" class="price_tag form-control" name="Price[]"/>' +
                                        '</div>' +                                            
                                    '</div>'+

                                '</div>'+
                            '</div>'+

                        '</div>'+
                        '<a href="#" class="remove_field btn btn-danger pull-right">cancel</a>' +
                    '</div>'

                  );
            }
        });

        $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
            e.preventDefault();
            $(this).parent('.product_wrapper').remove();
            calculateTotal();
            x--;
        })

        $('textarea').each(function () {
            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
        }).on('input', function () {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });

    });

//这是我的观点

<h2>Product List</h2>

                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse1">Product List</a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse in input_fields_wrap">
                            <div class="panel-group">
                                <div class="panel panel-default">                                      

                                </div>
                            </div>

                        </div>
                    </div>
                 </div>

                    <!--<div class="input_fields_wrap">

                    </div>-->

                    <button class="add_field_button btn btn-primary pull-right">Add More Fields</button>

                    <h1>
                    Testing here
                    </h1>
                    <textarea></textarea>

Answer 1

当您致电$('textarea')时，它会创建一个JQuery对象，该对象代表当时页面上的所有<textarea>元素。由于您以后动态添加<textarea>元素，因此在您致电时不会包含这些元素：

$('textarea').each(function () {
    this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
});

在将这些代码添加到页面后，您必须在其上调用该代码。但是您不希望再次为已添加的<textarea>元素调用它。您可以通过将其限制为附加到包装器的最后一个div来执行此操作：

$(wrapper).children(':last').find('textarea').each(function () {
    this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
});

当然，您可以将事件委派用于输入事件处理程序，就像您对.remove_field链接的单击事件处理程序所做的那样。

Answer 2

您可以在将新textarea附加到包装器后添加：

$(wrapper).find("textarea").each(function () {
            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
      }).on('input', function () {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
      });

您可以在以后优化代码。

我如何动态添加textarea并自动扩展

2 个答案: