どのように私は動的にテキストエリアを追加し、また自動拡張を行います

Question

私は、自動拡張で動的追加テキストエリアに関する質問があります。私はテキスト領域の自動拡張と私の成功に関する研究をしています。読み込み中のテキストエリアで使用することはできますが、どのようにして動的にテキストエリアを追加するかを自動拡張することもできます。私はイベントをkeyUpイベントに使用しているが、それは成功

ここ

をdidntのは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')を呼び出すと、それはその時のページ上にあるすべての<textarea>の要素を表しjQueryオブジェクトを作成します。

$('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>要素を追加しているので、それらは含まれません。しかし、すでに追加されている要素の<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

ます新しいテキストエリアをラッパーに追加した後に追加できます。

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

将来コードが短くなるように最適化することができます。