2

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; };
Improve this question
3
  • FYI: probably duplicate stackoverflow.com/questions/511128/… Commented Jun 20, 2013 at 6:34
  • 2
    Do you use jQuery? You can maybe bind on the 'change' event from your textarea, and change size everytime the value of it changes. Commented Jun 20, 2013 at 6:36
  • Is there a JQuery verion? How to access cols and rows of a TextArea in JQuery? Commented Jun 20, 2013 at 6:42

2 Answers 2

Reset to default
3
+50

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) });
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

@priya that probably wouldn't be too hard to implement, just add another conditional
0

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.

Improve this answer

Comments