title: Textarea adjust size based on content (with form-control class) using Jquery
body: <p>Hiii Everyone,</p>
  
  <p>I want to resize my textarea based on content.For that I tried code like</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label class="control-label col-sm-2" for="pwd"&gt;Sample Answer&lt;/label&gt;
      &lt;div class="col-sm-10"&gt; 
       &lt;textarea class="form-control" name="answer_sample" id="answer_sample" rows="5" onkeyup="textAreaAdjust(this)"&gt;&lt;/textarea&gt;
        &lt;br/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And using jquery</p>
  
  <pre><code> function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (25+o.scrollHeight)+"px";
  }
  </code></pre>
  
  <p>And what is the issue I am facing is even for backspace,delete for any press textarea is expanding like verylong.It keeps working like textarea will increase for any key press.If I tried textarea without 'class="form-control"' its working fine.But the responsiveness is not well.Please anyone help me to get out of this issue.Thanks in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/wA3jb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wA3jb.png" alt="enter image description here"></a></p>