Form Textarea Field Controls

This article will show you two ways to control certain aspects of the textarea field:

You specify a limit to the number of characters that can be typed into the textarea field.
The user determines whether or not long lines in the textarea field will wrap (IE/Windows only).

All the code you need is in this article.

How To Implement the Controls

First, copy the following JavaScript and paste it into the source code of your web page. It can pasted above or below the form.

In function doWordWrap(d), there are two instances of the word "myfield" between periods. Both instances of "myfield" need to be replaced with the textarea field name. Example, name="otherfieldname"

In function TAlimit(s) is a variable maxlength. Change the number 135 to the maximum number of characters you want to allow in your textarea field.

The above instances are the only edits required for the JavaScript. There are, however, two optional edits if you don't want the functionality of both features presented in this article.

If you do not want to limit the number of characters that can be typed into the textarea field, the function TAlimit(s) may optionally be removed from the JavaScript.
If you do not want to provide the user with the ability to determine whether or not long lines in the textarea field shall wrap, functions printCheckBox() and doWordWrap(d) may optionally be removed from the JavaScript.

Now that you've got the JavaScript on the page, let's find out how to use it.

Limiting the Number of Characters

To limit the number of characters, insert the "onkeyup" attribute with a call to the function TAlimit(this) into the textarea tag. Example:

Whenever the user types a character and releases the key, function TAlimit(this) removes any characters exceeding the limit you've specified.

That is all there is to that :)

Allowing the User To Turn Wrap On/Off

This code works only with IE on Windows.

The JavaScript already pasted into your web page checks to see if the browser is supported. If it is, the checkbox is printed. If not, the checkbox is not printed.

The command to print the checkbox is given with the following JavaScript:

Put the JavaScript wherever you want the checkbox to appear if the browser is IE on Windows.

And that is all there is to that :)

An Integrated Example

Here is a complete example. Copy it and paste it into a test web page to see how it works.

<script type="text/javascript" language="JavaScript"><!--

function printCheckBox() { 
// If it is IE ...
if(navigator.userAgent.indexOf('MSIE') > -1) {
   // If it is Windows ...
   if (navigator.userAgent.indexOf('Windows') > -1) {
      document.write('<input');
      document.write(' type="checkbox"');
      document.write(' name="WordWrap"');
      document.write(' onclick="doWordWrap(this.form)">');
      document.write('Word Wrap<br>');
      }
   }
}

function doWordWrap(d) {
if(d.WordWrap.checked == true)
   { d.myfield.wrap = 'soft'; }
else
   { d.myfield.wrap = 'off';  }
}

function TAlimit(s) {
var maxlength = 135; // Change number to your max length.
if (s.value.length > maxlength) 
s.value = s.value.substring(0,maxlength);
}

//--></script>


<form>

<script type="text/javascript" language="JavaScript"><!--
printCheckBox()
//--></script>

<textarea 
   name="myfield" 
   cols="33" 
   rows="5" 
   wrap="off" 
   onkeyup="TAlimit(this)">
</textarea>

</form>

Should I say it? Yes, why not!

That is all there is to that :)

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Form Textarea Field Controls

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe tothe Possibilities Ezine

Most RecentSoftware Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Form Textarea Field Controls

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions