Applying Input Masks With JQuery

Author
Gyowanny P. Queiroz, application architect at IBM

Gyowanny has been working in several web applications, SOA projects and then has discovered the power of ZK a year ago so since then has been studying and sharing with the community all the knowledge gained.

Date
December 3, 2009

Version
ZK 3.6.3

Abstract

This document describes how to apply input masks in the textbox component using jQuery and the Masked Input plug-in.

Prerequisites:

1. Latest jQuery
2. Masked Input Plugin

Getting Started

This tutorial came from a great forum discussion ( Forum Thread ) that was originated from a need to use input masks in some forms of my application. I'm very satisfied with the results so that I'm going to share this lesson with all the ZK community.

To make this small talk shorten we suppose that you already have configured your ZK environment. After downloading the jQuery framework and the masked input plug-in just make sure that you put them all under your project's folder. For Eclipse users the javascript files can be moved to a folder, say, called js under the WebContent folder.

Source

First of all, for code reuse purposes, we will create a file called masks.js that contains some basic functions to apply the input masks:

masks.js

 1 function applyZipCodeMask(compId){
 2    applyMask(compId, "99.999-999")
 3 }
 4 
 5 function applyPhoneMask(compId){
 6    applyMask(compId, "(99) 9999-9999");
 7 }
 8 
 9 function applyMask(compId, mask){
10    compId = '#' + compId;
11    jQuery(compId).mask(mask);
12 }

In the applyMask function you'll see this line "compId = '#' + compId" which appends the '#' symbol to the given component's ID since this is the way that jQuery finds the components. Another thing you have to keep in mind is that the real component's ID value is not that you wrote in the .zul file since ZK replaces it for one generated at run-time. So every time you want to handle ZK components with jQuery you have to call the "your_component".getUuid() method to retrieve the real component ID.

Now let's apply the input masks to the fields:

form.zul

 1 <zk>
 2   <!-- Loading all the scripts necessary to apply the input masks to the fields -->
 3   <?script type="text/javascript" src="/js/jquery.js"?>
 4   <?script type="text/javascript" src="/js/jquery.maskedinput.js"?>
 5   <?script type="text/javascript" src="/js/common.js"?>
 6   <window width="100%" title="Input Mask Example" border="normal">
 7 
 8        <!-- Here we call the functions to apply the input masks to the fields -->
 9        <attribute name="onCreate">
10             String command = "applyPhoneMask('"+phoneNumber.getUuid()+"');applyZipCodeMask('"+zipCode.getUuid()+"')";
11             Clients.evalJavaScript(command);
12        </attribute>
13 
14 	<vbox>
15              <hbox>Phone Numer: <textbox id="phoneNumber" /></hbox>
16              <hbox>ZIP Code: <textbox id="zipCode" /></hbox>
17         </vbox>
18   </window>
19 </zk>

As you can notice we need to apply all the masks in a single javascript code and then eval it by calling the Clients.evalJavaScript(command); method.

PS: If you have more than one form into your application you can move the lines 3, 4 and 5 to your index/main page so that the javascripts will be available for all your application.

The result:

Phone mask

Zip code mask

Conclusion

jQuery comes to help ZK developers in order to easily apply input masks in their application's forms. Maybe there are other ways to apply input masks but this is the way I did in my project so I can say this is a very productive way.

Here are my contact just in case you want further information about the input masks:

gyowanny@gmail.com

Comments

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.