Textarea maxlength

Demo

Overview

This script is used to apply maxlength properties to <TEXTAREA> elements

Licensing

This script is licensed under LGPL. Commercial licenses are also available

Download

textarea-maxlength.zip

Files in package:

js/dg-textarea-maxlength.js - Main javascript file for the widget
js/dg-textarea-maxlength-autoload.js - Javascript file to include when you want to apply maxlength control automatically without any manual configuration
js/external/* - Mootools library used by the script

Demo

Code used:

var maxLength = new DG.TextareaMaxlength( {
	el : 'poem',
	statusEl : 'poem-maxlength-status',
	maxLength : 32,
	statusText : '<b>{0}</b> of maximum <b>{1}</b> characters'
});

How to configurate

Include javascript file(s)

You need to include the javascript file dg-textarea-maxlength.js and two files from the mootools library in order to use this script

If you want the maxlength feature to be applied automatically to all textareas on your page which has a maxlength attribute set, you would also have to include dg-textarea-maxlength-autoload.js

Automatic config of all textareas

As mentioned above, if dg-textarea-maxlength-autoload.js is included, this feature will be added to all textarea fields with a maxLength property. If you want to display a current status for the textareas(example: 4/100, where 4 is current number of characters, and 100 is maxlength), you should also have an element on your page with id set to the id of your textarea + '-maxlength-status'.

Example:

As you can see, the id of the div is the id of the textarea + '-maxlength-status'. When such element exists, the script will display current status inside it. If you don't want to display current status, just omit this div element.

You can also use other elements than a div

Manual config

You can also apply this feature to elements manually, one by one.

Example:

<span id="poem-status"></span>
<textarea name="poem" id="poem" cols="30" rows="15"></textarea> <script type="text/javascript">
var maxLength = new DG.TextareaMaxlength( {
  el : 'poem',
  statusEl : 'poem-status',
  maxLength : 255,
  statusText : '{0} of maximum {1} characters'
}) </script>

Here, we have a textarea and abote it, a span element where we want to display current status.

Then, inside a <javascript> block, we configure our Javascript object.

We specify a reference to the textarea with the el property
We use the statusEl to tell where to display current status
maxLength is set manually to 255. (this can also be applied inline in the html by specifying a maxLength attribute for the textarea)
We specify a custom status text. This is a string you can configure as you want, When the script is running, you will se current number of characters instead of {0} and maxlengt instead of {1}. In case you want a different default status text which should be applied to all textareas, you can do that by changing the statusText at the top of dg-textarea-maxlength.js file

Comments

The auto config doesn't seem to be working properly for me. My error console outputs this error:

$(config.el).getProperty is not a function - line 59 of dg-textarea-maxlength.js

david hampton at 07:37PM, 2011/02/28.

Admin comment

David,

Make sure that the mootools files has been included in SCRIPT tags.

DHTMLGoodies at 10:33AM, 2011/03/01.

Not working on my HTML..

Momar at 10:42PM, 2011/05/20.

ops..
I have downloaded the file... .zip
so, where to place it?

Momar at 10:45PM, 2011/05/20.

Does not work. I have placed all files as you mentioned. Here is the error I keep getting:Uncaught TypeError: Object [object Object] has no method 'addEvent'DG.TextareaMaxlength.Class.addEvents -> dg-textarea-maxlength.js:79extend._owner -> mootools-1.2.4-core-yc.js:97DG.TextareaMaxlength.Class.initialize -> dg-textarea-maxlength.js:74extend._owner -> mootools-1.2.4-core-yc.js:97(anonymous function)mootools-1.2.4-core-yc.js:92(anonymous function)

Raghu at 01:42PM, 2011/11/14.