TextArea Element - Default Size to Match Content

If I set a fixed width in a textarea element, is there an elegant way to set the default height to a size that would allow all the content to fit?

I was hoping to avoid hard coding anything in jquery that would compare text.length and try to equate the value to the height, but maybe this is the only way I would like to see some kind of css rule of my own, if possible but I can't think nothing about the head.

I created a fiddle illustrating what I'm trying to accomplish. http://jsfiddle.net/edZgm/

here is the code:

CSS

textarea {
    overflow: hidden;
}

JQuery:

$('document').ready(function () {
    $('textarea')
        .width(500);

    //I have a width set, but see how the height defaults to a rediculously small amount.
    //I'd like to have the height default to fit everything on load.

});

HTML:

<textarea> ... lots of text </textarea>

Thanks in advance.

+5
source share
2 answers
+3

jQuery, Autosize.
http://www.jacklmoore.com/autosize/

, .
http://jsfiddle.net/edZgm/3/

.

    $('textarea')
    .autosize();
+3

All Articles