Text Limiter class with MooTools

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:

[cc lang=”javascript”]

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
});
}

});

[/cc]

Create Object for the Class

[cc lang=”javascript”]

[/cc]
If you want to give new parameter for the class then create a object in below pattern.
[cc lang=”javascript”]

[/cc]

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.