0

Is there a way for me to increase the height of the textarea 

<textarea class="form-control"></textarea>

instead of the scroll feature that we get when the input exceeds the width and height of the field? For example if the user enters 2 paragraphs the entire paragraph should be visible. The textarea should only have 1 or 2 line heights at the beginning when it is empty.

greenn
  • 309
  • 1
  • 6
  • 18
  • 1
    Possible duplicate of [Creating a textarea with auto-resize](https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) – 95faf8e76605e973 Sep 13 '18 at 20:24

1 Answers1

1

You can use below script to achieve that.

$("#textarea").on("keyup", function(event){
    if($(event.currentTarget).outerHeight() < $(event.currentTarget)[0].scrollHeight){
    $(event.currentTarget).height($(event.currentTarget)[0].scrollHeight);
  }
});

I have created snippet as well. 

$("#textarea").on("keyup", function(event){
 if($(event.currentTarget).outerHeight() < $(event.currentTarget)[0].scrollHeight){
   $(event.currentTarget).height($(event.currentTarget)[0].scrollHeight);
  }
})
#textarea{
  height:20px;
  overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" id="textarea"></textarea>

You can also test it here.. https://jsfiddle.net/zrnp7gkm/8/