Skip to content


Dynamically resizing textareas with jQuery

My latest project has a lot of textareas in a form that take up a lot of room. The page would look a lot nicer if they were smaller but would grow when added to. It was a little tricky, but here's a way to do it.

  $(function(){
    $('#myTextArea').keyup(function(){
      $('#myTextArea').css('height', '0px');
      $('#myTextArea').css('height', $('#myTextArea').attr('scrollHeight')+'px');
    });
  });

Try it out here-

Posted in Web Development.


4 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Tyson of the Northwest says

    I did some testing on it and it had some odd flickering in firefox. But other than that, very keen.

  2. Mike says

    Thanks, I’m not sure I can do anything about the flickering though.

  3. Robert Fisher says

    I really love the way Safari allows users to resize text areas themselves. I keep hoping the other browsers will all pick that up.

    • Mike says

      Really? I wasn’t aware of that. I mainly use FF.

      I see now that Chrome does the same thing. Pretty cool.



Some HTML is OK

or, reply to this post via trackback.