Character counter in AlloyUI Liferay

In liferay, we basically use jQuery to display counter which limits the amount of text field.

But this is a out-of-box module provided by AlloyUI which does the same.

How to Use?

First, we need to create text field and span which shows max length count number.

 <input type="text" id="input"/>  
 <span id="counter"></span> character(s) remaining  

Second, we need to bind input element id and span element id for setting the maximum length.

 AUI().ready(  
  'aui-char-counter',  
  function(A) {  
   new A.CharCounter(  
    {  
     counter: '#counter',  
     input: '#input',  
     maxLength: 10  
    }  
   );  
  }  
 );  

That's it and we're done.