Liferay Alloy UI Character Counter

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

About The Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top
%d