Text Limiter class with MooTools

  • Avinash
  • 3
  • Nov 06, 2010
  • Tutorial

Hi all, I have just started learning to create a class with MooTools Javascript Frame work. Just before two-three days I have explained how to create a class with MooTools. MooTools works well if you are eager to code new things instead of taking code from other developer.

As a starting point I have created one simple class which helps to limit the text length in Text area and Text boxes.

This functionality is very useful when you are developing a very interactive website. I have tried to make is very handy for even for the person who have just started the web development.

All you have to do is to place same class for which you want to apply the limiter, pass the text length in any of the attribute of the element. For example my default values are class limiter and attribute id rel. So this code will apply limiter to the element with class limiter and its max length will be as declared in rel attribute.

I will show this demo on jsFiddle. Let me inform, Js Fiddle is the best playground for the developers for all JavaScript frameworks.

This is best if you want to share your JS code with people or other developers to show your code and solve your problem if any.

To use this class all you have to do is, give class limiter to all text area and textboxes , give the limit in rel attribute (You can also pass your own attribute also). Third parameter is for ID of the limiter box. New element will be created with given ID to show the limit block for each text boxes and text areas. After completing this place below code to you file. Which will initialize the class and do the action:

Class Code

This is the code for the class, you have to add this code after including the mootools core JS:

var TextLimiter = new Class({ //implements Implements: [Options, Events], //options options: { textAreaClass: 'limiter', textLengthAttr: 'rel', counterId : 'counter_div' }, //initialization initialize: function(options) { this.setOptions(options); this.AddDiv(); this.assignEvents(); }, assignEvents: function() { $$('.'+this.options.textAreaClass).each(function(ele){ var $this = this; ele.addEvents({ focus: function(){ if(ele.retrieve('pos-left')) { var posleft = ele.retrieve('pos-left'); } else { var posleft = parseInt(ele.getPosition().x)+parseInt(ele.getSize().x) +'px'; ele.store('pos-left', posleft); } if(ele.retrieve('pos-top')) { var postop = ele.retrieve('pos-top'); } else { var postop = parseInt(ele.getPosition().y)+parseInt(ele.getSize().y) -parseInt($($this.options.counterId).getStyle('height').toInt())+ 'px'; ele.store('pos-top', postop); } $($this.options.counterId).setStyles({ 'left': posleft, 'top' : postop, 'visibility':'visible' }); $($this.options.counterId).innerHTML = parseInt(ele.get($this.options.textLengthAttr))-parseInt(ele.value.length); }, blur: function(){ $($this.options.counterId).setStyle('visibility','hidden'); }, keyup : function(){ if(parseInt(ele.value.length) > parseInt(ele.get($this.options.textLengthAttr))) { ele.value =ele.value.substring(0,parseInt(ele.get($this.options.textLengthAttr))); } else { $($this.options.counterId).innerHTML = parseInt(ele.get($this.options.textLengthAttr))-parseInt(ele.value.length); } } }); },this); }, AddDiv: function() { // Adding the the div with the given id which will behave for the limiter var CounterDiv  = new Element('div', {id: this.options.counterId}); $$('body').adopt(CounterDiv); CounterDiv.setStyles({ 'opacity': 0.5 }); } });
var TextLimiter = new Class({
 Implements: [Options, Events],
 options: {
 textAreaClass: 'limiter',
 textLengthAttr: 'rel',
 counterId : 'counter_div'
 initialize: function(options) {
 assignEvents: function() {
 var $this = this;
 focus: function(){
 var posleft = ele.retrieve('pos-left');
 var posleft = parseInt(ele.getPosition().x)+parseInt(ele.getSize().x) +'px';
 ele.store('pos-left', posleft);
 var postop = ele.retrieve('pos-top');
 var postop =
-parseInt($($this.options.counterId).getStyle('height').toInt())+ 'px';
 ele.store('pos-top', postop);
 'left': posleft,
 'top' : postop,

 $($this.options.counterId).innerHTML = parseInt(ele.get($this.options.textLengthAttr))-parseInt(ele.value.length);
 blur: function(){
 keyup : function(){
 if(parseInt(ele.value.length) > parseInt(ele.get($this.options.textLengthAttr)))
 ele.value =ele.value.substring(0,parseInt(ele.get($this.options.textLengthAttr)));
 $($this.options.counterId).innerHTML = parseInt(ele.get($this.options.textLengthAttr))-parseInt(ele.value.length);

 AddDiv: function() {
 // Adding the the div with the given id which will behave for the limiter
 var CounterDiv  = new Element('div', {id: this.options.counterId});
 'opacity': 0.5


Create Object for the Class

<script type="text/javascript">

window.addEvent('domready', function(){
 var Limiter = new TextLimiter();


If you want to give new parameter for the class then create a object in below pattern.

<script type="text/javascript">window.addEvent('domready', function(){
 var Limiter = new TextLimiter({
 textAreaClass : 'limitbox', // will apply limit to all element with class "limitbox"
 textLengthAttr : 'limit',  // Will find the limit attribute for the max limit for that element
 counterId : 'counter'  // ID of the creating div which shows the limit for each element,


Working code

You can find working code for this class at js Fiddle also on below link:

Limiter class

Hope you find this class useful for your application, let me know your question, suggestion by commenting here.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: