Liferay AUI Char Counter

Liferay AUI Char Counter is one of java script utility or module from AUI Java script.

Some time we may need to count characters and we need to make alert some message when user enters more characters.

Generally we use this character count for SMS message or some other limited text input required then we can use AUI Character Count.

Required AUI module is aui-char-counterand it’s already available in Liferay portal so we simply load whenever we needed. We use AUI use java script function to load the modules.

Sample Code Snippet

<aui:input name="textMessage" id="textMessage" label="Text Message" type="textarea"></aui:input> <span style=" float: left;">Characters Left&nbsp;</span><p id="<portlet:namespace/>textCounter"></p> <aui:script> AUI().use('aui-char-counter', function(A) { new A.CharCounter({ counter : '#<portlet:namespace/>textCounter', input : '#<portlet:namespace/>textMessage', maxLength : 140, on : { maxLength : function(event) { alert('The max length limit was reached'); } } }); }); </aui:script>

Portlet Screen

Download Liferay AUI Char Counter Portlet

https://sourceforge.net/projects/meeralferay/files/LiferayAUICharCounterExample

Complete Code Example

Portlet view page

<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet"%> <%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme"%> <%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%> <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%> <%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%> <style> .aui .control-group { margin-bottom: 0px; } </style> <portlet:defineObjects /> <liferay-theme:defineObjects /> <portlet:actionURL var="sendActionURL" windowState="normal" name="getInputData"> </portlet:actionURL> <h2>Liferay AUI Char Counter Example</h2> <aui:form action="<%=sendActionURL%>" method="post" name="smsForm"> <aui:input name="textMessage" id="textMessage" label="Text Message" type="textarea"> <aui:validator name="required" /> </aui:input> <span style=" float: left;">Characters Left&nbsp;</span><p id="<portlet:namespace/>textCounter"></p> <aui:button type="submit" value="Submit"></aui:button> </aui:form> <aui:script> AUI().use('aui-char-counter', function(A) { new A.CharCounter({ counter : '#<portlet:namespace/>textCounter', input : '#<portlet:namespace/>textMessage', maxLength : 140, on : { maxLength : function(event) { alert('The max length limit was reached'); } } }); }); </aui:script>

Reference Links

http://alloyui.com/versions/2.5.x/tutorials/char-counter/

Meera Prince

Liferay Contributor of The Year 2014

Liferay Top Contributor Award Winner 2013

http://www.liferaysavvy.com

Share on Google Plus

About Meera Prince

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.