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.
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:
