I have a text area in which user can type any amount of text. I want that when user adds the text to it the text area should grow automatically based on content entered. I used this implementation for that:
$("#message").input(function(event){
while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height()+1);
};
});
This works perfectly fine as user types input to the text area, it grows automatically and scroll never appears.
But when a large text is pasted into the text area the whole page becomes unresponsive. Which I feel is due to the loop running too many times for each character.
Any fixes for this? Or Do you know some other implementation than this that fulfills both the requirements:
- Autoheight based on input without scroll
- Large text pasted into the text area and it grows to required size without becoming unresponsive.
Thanks!
