Geek asks and answers

JQuery textarea autogrow, don't grow to the end of the line / enter

There were many threads for automatically expanding text fields. Still haven't found what I would call "perfect." One thing I need is that I can’t fix it, they start to grow as soon as the user starts typing. I tried to fix it myself, no luck. I do not want the text area to expand until the end of the line is reached or the key is pressed.

http://jsfiddle.net/mstefanko/Jrpqg/65/

Thank!

UPDATED RESPONSE:

In my situation, I not only wanted the text area to expand only when it got to the next line / enter. But also shrink without text. A quick fix, in addition to the answer provided, I added that if the text area is empty, also run the css height line. Will not decrease when erased, but at least it resets the height after deleting all the text.

        if ($.trim($(this).val()) == "") {
            $(this).css('height', Math.max(shadow.height() + 20, minHeight));
        }
        if(this.scrollHeight  > $this.height()) {
            $(this).css('height', Math.max(shadow.height() + 20, minHeight));
        }
+3
source share
1 answer

add the following if statement:

if(this.scrollHeight  > $this.height()) {
    $(this).css('height', Math.max(shadow.height() + 20, minHeight));
} else if($this.height() < shadow.height() + 20) {
    $(this).css('height', Math.max(shadow.height() + 20, minHeight));
}

It may work or it may take a little more massage to make it work to reduce the size on request in the comments.

+3
source

More articles:


All Articles