• Liferay Alloy UI Character Counter

    Posted on September 11, 2014 by Hamidul Islam in Liferay.

    Aim of this article:

    Use Liferay Alloy UI to display character counter.

    Whats character counter:

    Consider you have text area in your portlet and user should be allowed to enter only specific number characters. Say maximum number of characters can be entered is 150

    Alloy Character Counter

    Alloy Character Counter

     As you type in the text area you will be able to see how many characters are pending.

     

    Liferay Alloy Character Counter:

    Liferay Alloy UI has a module aui-char-counter which can be easily used to implement character counter.

    How to Use:

    See the below code

    
    <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
    <%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
    <portlet:defineObjects />
    
    <textarea id="demoTextArea"></textarea>
    
    <span id="myCounter"></span> character(s) remaining
    
    <aui:script use="aui-char-counter">
    var counterVariable = new A.CharCounter({
    
    input: '#demoTextArea',
    
    counter: '#myCounter',
    
    maxLength: 150
    
    });
    </aui:script>
    
    

    This is the only code you need to display character counter.

    Explanation of the code:

    Alloy Character Counter Explanation

    Alloy Character Counter Explanation

    Post Tagged with , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you human? * Time limit is exhausted. Please reload CAPTCHA.

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close