TextArea Sizer

Paul Tuckey Mar 12, 2007

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://www.javascriptsource.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>

Leave a Response

(9 comments)

Change the textarea input setting:[br /][br /]<textarea cols="40" rows="1" name="reason">Add more text to see it expand!</textarea>[br /][br /]Otherwise, it is probably an error in the CSS settings.

Lee Nov 6, 2008

I have installed this javascript into my form I am creating and notice the default text size box is approximately 3 lines tall.[br /][br /]How can I change this so it is initially only one line tall?[br /][br /]Thanks,[br /][br /]Paul

Paul Oct 11, 2008

How about adding a couple more functions like a calculator that processes equations inside the text box and/or has running word/character count and/or countdown for n word and/or n character limits?

Gordon Murray Sep 24, 2008

Great piece of code! Just what I've been looking for. Cheers! NicMason.com - Yarraville.com.au

NicMason.com Jul 23, 2008

In order to better help you, you'll need to post your question [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]over on the forums[/a].

Lee Jun 26, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details