The JavaScript Source: Forms : TextArea Sizer

Browse Doc JS's Tips!

Promotions

Free Announcements

General

You no longer need to provide large textareas in your forms. This script will resize textarea boxes to fit the text in them.

Click here to try it out!

Notes

Created by: Paul Tuckey
Web Site: http://tuckey.org/
Posted: March 12, 2007

To make a textarea none-resizeable, just add the following to the textarea element: onkeyup="";, e.g.,
<textarea cols="40" rows="2" name="reason3" onkeyup="">Add more text to see it expand!</textarea>

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: textArea Sizer.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Paul Tuckey | http://tuckey.org/
Modified by: EZboy yuriy.demchenko at gmail.com */

function countLines(strtocount, cols) {
  var hard_lines = 1;
  var last = 0;
  while ( true ) {
    last = strtocount.indexOf("\n", last+1);
    hard_lines ++;
    if ( last == -1 ) break;
  }
  var soft_lines = Math.round(strtocount.length / (cols-1));
  var hard = eval("hard_lines  " + unescape("%3e") + "soft_lines;");
  if ( hard ) soft_lines = hard_lines;
  return soft_lines;
}

function cleanForm() {
  for(var no=0;no<document.forms.length;no++){
    var the_form = document.forms[no];
    for( var x in the_form ) {
      if ( ! the_form[x] ) continue;
      if( typeof the_form[x].rows != "number" ) continue;

      if(!the_form[x].onkeyup) {the_form[x].onkeyup=function()
      {this.rows = countLines(this.value,this.cols)+1;};the_form[x].rows =
      countLines(the_form[x].value,the_form[x].cols) +1;}
    }
  }
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  cleanForm();
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="textArea Sizer.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form>
  <textarea cols="40" rows="2" name="reason">Add more text to see it expand!</textarea>
</form>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

2. From: EZboy
05/04/2007 15:37:00

4. From: Douglas McKibbin
Where do I put the .js file
03/30/2008 18:50:35

5. From: Lee (Admin)
06/26/2008 11:33:22

3. From: Lee (Admin)
08/07/2007 14:27:34

1. From: Wiz Feinberg
03/16/2007 14:31:17

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

2. From: EZboy05/04/2007 15:37:00

4. From: Douglas McKibbinWhere do I put the .js file03/30/2008 18:50:35

5. From: Lee (Admin)06/26/2008 11:33:22

3. From: Lee (Admin)08/07/2007 14:27:34

1. From: Wiz Feinberg03/16/2007 14:31:17

2. From: EZboy
05/04/2007 15:37:00

4. From: Douglas McKibbin
Where do I put the .js file
03/30/2008 18:50:35

5. From: Lee (Admin)
06/26/2008 11:33:22

3. From: Lee (Admin)
08/07/2007 14:27:34

1. From: Wiz Feinberg
03/16/2007 14:31:17