CODEWITHSUNDEEP
javascripthtmlcss
user2503843
user2503843

Reputation:

Autosize textarea using prototype?

I'm currently working on an internal sales application for the company I work for, and I've got a form that allows the user to change the delivery address.

Now I think it would look much nicer, if the textarea I'm using for the main address details would just take up the area of the text in it, and automatically resize if the text was changed.

enter image description here

Any ideas? Gracious !!!

Edit by XeeMez:I've modified the code a little because it was acting a little odd, I changed it to activate on keyup, because it wouldn't take into consideration the character that was just typed.

resizeIt = function( ) {
  var str = $( 'iso_address' ).value;
  var cols = $( 'iso_address' ).cols;
  var linecount = 0;
  $A( str.split( "\n" ) ).each( function( l ) {
    linecount += 1 + Math.floor( l.length / cols ); // take into account long lines
  } )
  $( 'iso_address' ).rows = linecount;
};

Upvotes: 2

Views: 303

Answers (2)

htrufan
htrufan

Reputation: 261

Here is the approach I used. Call expandTextArea on keyup or keypress.

var minimumTextAreaRows = 10;
function expandTextArea(event) {
    var element = event.target;
    element.rows = minimumTextAreaRows;
    while (element.clientHeight < element.scrollHeight) {
        element.rows = element.rows + 1;
    }
};

Combine with a css that prevents the scrollbar to avoid it flashing

textarea.noscrollbar {
    overflow: hidden;
}

This will also "shrink" to the minimum size you specify. Remove element.rows = minimumTextAreaRows; to make it not shrink.

Upvotes: 0

Ashish Sharma
Ashish Sharma

Reputation: 342

Here's technique for autosizing a textarea.

Uses pixel height instead of line height: more accurate handling of line wrap if a proportional font is used.
Accepts either ID or element as input
Accepts an optional max height param - useful if you'd rather not let the text area grow beyond a certain size (keep it all on-screen, avoid breaking layout, etc.)
Tested on Firefox 3 and IE6

Code: (plain vanilla Javascript)

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   /* Accounts for rows being deleted, pixel value may need adjusting */
   if (text.clientHeight == text.scrollHeight) {
      text.style.height = "30px";
   }       

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

Demo: (uses jQuery, targets on the textarea i'm typing into right now - if you have Firebug installed, paste both samples into the console and test on this page)

$("#post-text").keyup(function() 
{
  FitToContent(this, document.documentElement.clientHeight)
});

Upvotes: 3

Related Questions