CODEWITHSUNDEEP
javascriptjquerydomtextarea
hekevintran
hekevintran

Reputation: 23722

Auto expanding textarea

When a textarea has more text in it than can be shown it will display scroll bars. How can I make it so that the textarea will expand itself when it has more text than it can display. My goal is never to have scroll bars appear. A jQuery solution is preferred.

Upvotes: 1

Views: 3091

Answers (3)

Enigma Plus
Enigma Plus

Reputation: 1548

I have problems with autosize() for what I'm doing so I use a slightly different method which I'm just posting in case it is useful to others

The behaviour I need is a textarea with its height sized on load and resized when it loses focus (an edit finishes). 

function updateAddressHeight() {
   var lineHeight=16; //Whatever you need
   address = $("#Address").val()
   lines = address.split("\n");

   $("#Address").height( (lines.length * lineHeight) );
} //funct

$(document).ready(function(){
    $("#Address").change( function() {
        updateAddressHeight();
    });

    updateAddressHeight();
})

Upvotes: 0

g023
g023

Reputation: 857

http://jacklmoore.com/autosize/

// Example:
$(document).ready(function(){
    $('textarea').autosize();    
});

as simple as it gets. I think 8 ).

Upvotes: 2

Eton B.
Eton B.

Reputation: 6281

Here is a working example:

http://blogs.sitepointstatic.com/examples/tech/textarea-expander/index.html

It contains downloadable code as well as implementation instructions.

Upvotes: 3

Related Questions