New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Textarea maxlength

Demo

Bookmark and Share

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

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

<script type="text/javascript" src="js/external/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="js/external/mootools-1.2.4.4-more.js"></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'.

Example:

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

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

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 07:37PM, 2011/02/28.
Admin comment
DHTMLGoodies
David,

Make sure that the mootools files has been included in SCRIPT tags.
DHTMLGoodies at 10:33AM, 2011/03/01.
Momar
Not working on my HTML..
Momar at 10:42PM, 2011/05/20.
Momar
ops..
I have downloaded the file... .zip
so, where to place it?
Momar at 10:45PM, 2011/05/20.
Raghu
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.

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