Skip to content

Automatic resizing of an HTML <textarea> element

Today, while improving the Rails GUI for the Sicirec database, I was struck once again by how annoyingly small <textarea>s can be when having the user type lots of text.

I had already seen the ideal solution when commenting on Laurelin’s waarbenjij.nu weblog. Although their response box is much too narrow, the height of the box auto-adjusts to the amount of text typed. I decided to borrow their code and amend it slightly for our own use. Differences are:

  • My code works with Opera, but is untested in IE because we don’t feel the need to support IE for an internal application.
  • In our DB, notes will often be shortened, so my code also shrinks the textarea when the text shrinks. The function remembers the original number of rows set in the source and will never shrink past that number.
userAgentLowerCase = navigator.userAgent.toLowerCase();
 
function resizeTextarea(t) {
  if ( !t.initialRows ) t.initialRows = t.rows;
 
  a = t.value.split('\n');
  b=0;
  for (x=0; x < a.length; x++) {
    if (a[x].length >= t.cols) b+= Math.floor(a[x].length / t.cols);
  }
 
  b += a.length;
 
  if (userAgentLowerCase.indexOf('opera') != -1) b += 2;
 
  if (b > t.rows || b < t.rows)
    t.rows = (b < t.initialRows ? t.initialRows : b);
}

The function can easily be added to the onkeyup and onmouseup event handlers of a <textarea> element as in:

<textarea cols="60" rows="4"
          onkeyup="resizeTextarea(this)"
          onmouseup="resizeTextarea(this)"></textarea>

I didn’t add it inline as in the example, though. I used Ben Nolan’s Behaviour Javascript library to tie things together a little more cleanly.


    7 Comments ( Add comment / trackback )

    1. (permalink)
      Comment by bbnnt
      On March 21, 2008 at 00:40

      Works great, even on ie (at least 7).
      Kind of simple but a very nice snippet > functionality to add somewhre/sometimes when useful.

      Thx.

    2. (permalink)
      Comment by sinan
      On March 23, 2009 at 07:47

      i can’t seems to make it work on the project i am working on now. i am using fire fox. mind helping me out.

    3. (permalink)
      Comment by Weverton Naves
      On August 2, 2009 at 00:07

      Good job man! Congratulations! Its useful. I place this code in my site and its all right! Thanks.

    4. (permalink)
      Comment by Rowan Rodrik
      On January 24, 2010 at 14:46

      Thanks for all the kind words! 🙂

    5. (permalink) Trackback from www.hblbyp.com
      On May 24, 2016 at 04:03

      http://www.hblbyp.com

      BigSmoke » Automatic resizing of an HTML <textarea> element

    6. On May 25, 2016 at 08:00

      legitimate online store for sale

      BigSmoke » Automatic resizing of an HTML <textarea> element

    7. On Oct 01, 2016 at 22:45

      http://fotoshows.com.Br/index.php?a=profile&u=mikaylaser

      BigSmoke » Automatic resizing of an HTML <textarea> element

    Post a comment

    (required)
    (required)

    Your email is never published nor shared.

    (optional)
    Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>