Textarea maxlength


Bookmark and Share


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


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


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


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

<script type="text/javascript" src="js/external/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="js/external/mootools-"></script>
<script type="text/javascript" src="js/dg-textarea-maxlength.js"></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

<script type="text/javascript" src="js/dg-textarea-maxlength-autoload.js"></script>

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'.


<textarea name="myComment" id="myComment" maxLength="10" cols="50 rows="3"></textarea>
<div id="myComment-maxlength-status"></div>

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.


<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


david hampton
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 12:37PM, 2011/02/28.
Admin comment

Make sure that the mootools files has been included in SCRIPT tags.
DHTMLGoodies at 03:33AM, 2011/03/01.
Not working on my HTML..
Momar at 04:42PM, 2011/05/20.
I have downloaded the file... .zip
so, where to place it?
Momar at 04: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:79
extend._owner -> mootools-1.2.4-core-yc.js:97
DG.TextareaMaxlength.Class.initialize -> dg-textarea-maxlength.js:74
extend._owner -> mootools-1.2.4-core-yc.js:97
(anonymous function)mootools-1.2.4-core-yc.js:92
(anonymous function)
Raghu at 06:42AM, 2011/11/14.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com