CODEWITHSUNDEEP
javascriptjquerytextareajquery-events
Josh R
Josh R

Reputation: 1295

How to change the number of rows in the textarea using jQuery

I have a textarea with 5 lines. I want to show only one line and on focus it should show remaining 4 lines.

Upvotes: 21

Views: 32437

Answers (3)

Phrogz
Phrogz

Reputation: 303253

jQuery(function($){
  $('#foo').focus(function(){
    $(this).attr('rows',5);
  }).blur(function(){
    $(this).attr('rows',1);
  });
});

Or, using less jQuery, less typing, and getting a hair more performance:

jQuery(function($){
  $('#foo')
    .focus(function(){ this.rows=5 })
    .blur( function(){ this.rows=1 });
});

Upvotes: 6

Vish Kamath
Vish Kamath

Reputation: 1

Try this

$('#textboxid').focus(function()
    {
       $(this).animate({'height': '185px'}, 'slow' );//Expand the textarea on clicking on it
       return false;
     });

Upvotes: 0

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

You can try something like this:

     $(document).ready(function(){

    $('#moo').focus(function(){
        $(this).attr('rows', '4');
    });
});

where moo is your textarea.

Upvotes: 33

Related Questions