Adding a character counter to a textarea

Some users can get just a bit long-winded when presented with a text area to type into. When that happens it would be useful to be able to show the number of characters remaining and to block the input of extra characters if the limit is exceeded.

Getting ready

We'll use a very simple form created by the Form Wizard with just two elements — a TextArea and a Button. We will need to know the ID of the text area; by default it will be text_0, the same as the element name.

How to do it...

1. 1. Create the form, save it, and view it in your browser.

   

2. 2. Notice that although we've labeled the textarea 50 chars max it takes nearly 100 without complaint. In fact you could keep on typing for a long time and the textarea would just scroll down and accept the input.

3. 3. We're going to add some JavaScript to the Form JavaScript box to count the characters:

   window.addEvent('load', function() {
   // execute the check after each keystroke
   $('text_0').addEvent('keyup', function...