Smokes your problems, coughs fresh air.

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.

4 Comments

  1. bbnnt

    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. sinan

    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. Weverton Naves

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

  4. Rowan Rodrik

    Thanks for all the kind words! 🙂

© 2024 BigSmoke

Theme by Anders NorenUp ↑