The JavaScript Source: Forms : TextArea Sizer

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

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

8. From: Paul
Initial Size of Texzt Box Too Large
10/11/2008 22:52:29

9. From: Lee (Admin)
11/06/2008 11:40:49

7. From: Gordon Murray
Suggestion
09/24/2008 22:56:36

6. From: NicMason.com
Thank you!
07/24/2008 01:51:21

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

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

8. From: PaulInitial Size of Texzt Box Too Large10/11/2008 22:52:29

9. From: Lee (Admin)11/06/2008 11:40:49

7. From: Gordon MurraySuggestion09/24/2008 22:56:36

6. From: NicMason.comThank you!07/24/2008 01:51:21

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

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

8. From: Paul
Initial Size of Texzt Box Too Large
10/11/2008 22:52:29

9. From: Lee (Admin)
11/06/2008 11:40:49

7. From: Gordon Murray
Suggestion
09/24/2008 22:56:36

6. From: NicMason.com
Thank you!
07/24/2008 01:51:21

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