Question

this is my code: (keep it simple)

<textarea style="height:100px;">
    $textareatext
</textarea>

• if $textareatext is 1 line long I want the height of textarea to fit
• if its 3, 5 or 10 lines…same thing.

The issue I am having is at 100px the height is too big, but if I set it to 20px and there are 10 lines then the textarea height is too small.
NOTE: values are preloaded via mysql. so I think it should count the lines,then set the height based on how many lines ?
Any suggestions?

I use Javascript and jQuery, or anything you would suggest.

Thank you.

Answer 1

These may help. They’re both jQuery plugins.

• jQuery Elastic
• Flexible Area
• Autogrow

Edit

var $textArea = $("#textarea-container");

resizeTextArea($textArea);

$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}​

This answer was provided by François Wahl, below.