Liferay Portlet Show Caps Lock On for Password Field

While dealing with password field its always better to intimate user if the caps lock is on. Showing Caps Lock on status is very important for better user experience. In this article we will show how to use liferay alloy script to accomplish this task.

Say below is the password filed

<aui:input name="password1" type="password" label="new-password">
 		<aui:validator name="required"/>
 </aui:input>
<span id="<portlet:namespace />passwordCapsLockSpan" style="display: none;"><liferay-ui:message key="caps-lock-is-on" /></span>

Consider that user is filling the field and we want to inform user if the Caps Lock is on. Below is the alloy script for it

<aui:script use="aui-base">
	var password1 = A.one('#<portlet:namespace />password1');
	if (password1) {
		password1.on(
			'keypress',
			function(event) {
				Liferay.Util.showCapsLock(event, '<portlet:namespace />passwordCapsLockSpan');
			}
		);
	}	
</aui:script>

We are binding password1 field with key press. If the Caps Lock is on then Liferay.Util.showCapsLock will display message that the Caps is on. The second parameter of Liferay.Util.showCapsLock is id of element where we need to display our message. We can create one span  element after the password field to display the message which is exactly shown in the above code.

Complete Code:

Consider that we are creating a custom portlet where we have filed like current password, new password and confirm password. In this case complete code would be something like this

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

<portlet:defineObjects />
<aui:form> 

 <aui:input name="current" type="password" label="current-password">
 	<aui:validator name="required"/>
 </aui:input>
 <aui:input name="password1" type="password" label="new-password">
 		<aui:validator name="required"/>
 </aui:input>
 
 <aui:input name="password2" type="password" label="confirm-password">
 		<aui:validator name="required"/>
 </aui:input>

<span id="<portlet:namespace />passwordCapsLockSpan" style="display: none;">
		<liferay-ui:message key="caps-lock-is-on" />
</span>
<aui:button-row>
	<aui:button type="button" value="Update Password"/>
</aui:button-row>

</aui:form>

<aui:script use="aui-base">
	var current = A.one('#<portlet:namespace />current');
	var password1 = A.one('#<portlet:namespace />password1');
	var password2 = A.one('#<portlet:namespace />password2');
	
	if (current) {
		current.on(
			'keypress',
			function(event) {
				Liferay.Util.showCapsLock(event, '<portlet:namespace />passwordCapsLockSpan');
			}
		);
	}
	
	if (password1) {
		password1.on(
			'keypress',
			function(event) {
				Liferay.Util.showCapsLock(event, '<portlet:namespace />passwordCapsLockSpan');
			}
		);
	}
	
	if (password2) {
		password2.on(
			'keypress',
			function(event) {
				Liferay.Util.showCapsLock(event, '<portlet:namespace />passwordCapsLockSpan');
			}
		);
	}
</aui:script>

Plain Javascript:

Yes we can also use plain JavaScript in the place of liferay alloy script. Its not mandatory to use the alloy stuffs for this purpose. But using the alloy script will make the code more cleaner.