CODEWITHSUNDEEP
jquerycsstextarea
user852974
user852974

Reputation: 2282

Expanding a textarea depending on how much text it has in it (jquery)

How can I get a textarea to initially have only 1 row, but then when the text reaches the end of the row to add another row, and keep doing this up until a maximum of 5 rows?

Upvotes: 6

Views: 184

Answers (5)

roopunk
roopunk

Reputation: 4361

I took the idea from Jake Feasel's answer and it not only works for expanding but also for contracting the textarea in case there is lesser content.

HTML

<textarea id="foo" rows="1" cols="40"></textarea>
<div id="stat"></div>

It also displays the ideal number of rows required according to the content in a sepatate div

CSS

​#foo
{
resize:none;        
}​

This is required because, once the textarea has been resized using this handler, the code stops working

JS

$(function () {

    $("#foo").on("keyup", function (e) {       
        var idealRows =  parseInt($(this).val().length/$(this).attr('cols'))+
               ($(this).val().split("\n").length-1)+1 ;
        var rows = $(this).attr('rows');

        // for the bugging scroll bar
        if(rows > 4)  $('#foo').css('overflow','auto')
        else $('#foo').css('overflow','hidden')

        // for expanding and contracting         
        if( (idealRows > rows) && (rows < 5) ||  (idealRows < rows) && (rows > 1))
            $(this).attr("rows", idealRows);                    

    });

});​

Demo: http://jsfiddle.net/roopunk/xPdaP/3/

Notice that it also takes care of the scroll bar which pops up between keyDown and keyUp. IMO: It is kinda bugging.

Note Hope this helps!:) ​

Upvotes: 1

Jake Feasel
Jake Feasel

Reputation: 16955

Something like this:

<textarea id="foo" rows="1" cols="40"></textarea>

$(function () {

    $("#foo").on("keyup", function () {

       if ($(this).attr('rows') < 5 &&
           parseInt($(this).val().length/$(this).attr('cols')) >= $(this).attr('rows'))
           $(this).attr("rows", parseInt($(this).attr("rows"))+1);

    });

});

http://jsfiddle.net/Q3pPT/

edit Slight improvements to handle newlines:

$(function () {

    $("#foo").on("keyup", function (e) {

       if ($(this).attr('rows') < 5)
       {
           if (
               parseInt($(this).val().length/$(this).attr('cols'))+
               ($(this).val().split("\n").length-1) 

               >= 

               $(this).attr('rows')
              )
               $(this).attr("rows", parseInt($(this).attr("rows"))+1);

           if (e.keyCode == 13)
           {
               $(this).attr("rows", parseInt($(this).attr("rows"))+1);
           }
       } 

    });

});

http://jsfiddle.net/Q3pPT/2/

Upvotes: 1

Nate B
Nate B

Reputation: 6356

This A List Part article gives an in-depth, step-by-step description on how to best implement this functionality.

Upvotes: 1

Infinity
Infinity

Reputation: 683

download this plugin : http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js

$('textarea#comment').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});

Upvotes: 0

Davi Ferreira
Davi Ferreira

Reputation: 96

Check the Elastic jQuery plugin: http://unwrongest.com/projects/elastic/

You can use the max-height property on your CSS combined with the maxlength of your textarea to limit it to 5 lines.

Upvotes: 0

Related Questions