Subscribe to
the Possibilities Ezine

Subscription Terms of Service
Privacy Policy

Most Recent
Software Additions

Easy-Automation Software Package

4 software titles packaged for you. Easily automate your website maintenance tasks.

Directory Zip

Directory Zip backs up individual directories on your server protecting you from loss of data, loss of your web site files, loss of your web site business.

Site Search Analytics

When they use your site search box, that is when your visitors tell you what they are really looking for.

Go Short URL

Create short URLs with your own control panel, on your own server, and all your short URLs will have your own domain name.

Email .This. Link ...

Create dynamic mailto: links for your web pages that will prompt your site visitors to "Email .This. Link".

Secure View and Remove

Remove the data from your secure server safely, without compromising your customer's trust.

Changing textarea Box Size On-The-Fly

The user can change a textarea form field to any size desired, if you so allow.

Ever run into a textarea box that was designed way too small? Or maybe even too big?

It can be frustrating. Put your form users in control. Let them change the textarea box size to fit their needs.

Use today's code on your page and the user can change a textarea form field to any size desired.

I find more situations where it makes sense to let the user change textarea field height than I do for changing textarea width. The source code of both are presented here, individually and together, for pasting into your own forms.

It's fun to code.

A small input text field is provided for the user to type a number. When the user types a number, the textarea dimension change is immediate.

It lets users have a dramatic effect with little effort.

textarea Field Height (rows) Change

To get started, let's enable the height change. JavaScript is used to change the value of the rows attribute in the textarea tag.

There will be the source code, some information about how it works, and then a working example with the same source code.

<form name="FormName"> Number of text rows to display: <input type="text" name="RowsInputName" size="6" onkeyup="changeHeight()" /><br /> <textarea name="TextareaName" cols="40" rows="5"></textarea> </form> <script type="text/javascript"> function changeHeight() { document.FormName.TextareaName.rows = document.FormName.RowsInputName.value; } </script>

The form name, the textarea field name, and the input field name all need to be reflected in the JavaScript.

For clarity, the example form and field names hint at what they are.

The line of JavaScript beginning with "document..." has the form name twice and both field names once. It tells the browser to assign the value of the textarea field rows attribute equal to the number typed into the text input field.

The onkeyup= attribute in the input text field tag triggers the JavaScript every time a key is released after typing something in the text field. When triggered, the JavaScript attempts to adjust the height of the textarea field.

To use the source code, conform the form and field names in the JavaScript to the names used in your form.

Here is a working example of the above source code. The only change is the form name and JavaScript function name to avoid conflict with other forms and function names on this same page.

Number of text rows to display:

In the above example, when you type a number into the spot provided, the height/rows of the textarea field changes.

textarea Field Width (cols) Change

Following is source code to enable the width change. JavaScript is used to change the value of the cols attribute in the textarea tag.

<form name="FormName"> Number of characters to display per row: <input type="text" name="ColsInputName" size="6" onkeyup="changeWidth()" /><br /> <textarea name="TextareaName" cols="40" rows="5"></textarea> </form> <script type="text/javascript"> function changeWidth() { document.FormName.TextareaName.cols = document.FormName.ColsInputName.value; } </script>

As previously, the example form and field names hint at what they are.

The line of JavaScript beginning with "document..." has the form name twice and both field names once. It tells the browser to assign the value of the textarea field cols attribute equal to the number typed into the text input field.

To use the source code, conform the form and field names in the JavaScript to the names used in your form.

Here is a working example.

Number of characters to display per row:

Type a number into the spot provided to change the width/cols of the textarea field.

Both textarea Field Width (cols) and Height (rows) Change

To provide both width and height change functionality, the above are merged.

Here is the source code.

<form name="FormName"> Number of text rows to display: <input type="text" name="RowsInputName" size="6" onkeyup="changeHeight()" /><br /> Number of characters to display per row: <input type="text" name="ColsInputName" size="6" onkeyup="changeWidth()" /><br /> <textarea name="TextareaName" cols="40" rows="5"></textarea> </form> <script type="text/javascript"> function changeHeight() { document.FormName.TextareaName.rows = document.FormName.RowsInputName.value; } function changeWidth() { document.FormName.TextareaName.cols = document.FormName.ColsInputName.value; } </script>

Two input text fields in the form as for the number of rows for the textarea field and the number of characters per line.

There are two lines of JavaScript beginning with "document..." Both have the form name twice and both field names once.

Conform the form and field names in the JavaScript to the names used in your form.

Here is a working example.

Number of text rows to display:
Number of characters to display per row:

Adjust the textarea field dimensions by typing numbers in the input text fields.

Changeable textarea Dimensions For Your Forms

To incorporate the textarea dimension changes into your forms, do these two things:

1. Provide a text input field for the user to type in the new dimension. Use the examples in this article as a guide.

2. Put the JavaScript to change the dimension somewhere below the form. Change the JavaScript to reflect the form name, textarea field name, and new dimension input text field name.

As you can see, it can be a fun project. And it's easy to implement.

Folks who use the Safari web browser know a textarea box resize feature is built into the browser. Until other web browsers incorporate the feature, your site visitors are sure to appreciate this code.

Will Bontrager
©2007 Bontrager Connection, LLC Bontrager Connection, LLC

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.

© 1998-2001 William and Mari Bontrager
© 2001-2008 Bontrager Connection, LLC