Masked Input

This article is published in conjunction with the main jQuery in XPages #3 – Masked Input

 

How does it work?

To add the Masked Input capability to your XPages in a generic, re-usable manner you will need to do the following:

Adding the JavaScript libraries

In the designer menu select Window | Show Eclipse Views | Package Explorer

Search for the WebContent folder
On your local machine make a “js” folder with the following files in it

• minified jQuery core file (jquery-1.7.1.min.js)
• minified Masked Input File jquery.maskedinput-1.3.min.js
• x$.js function

Drag and drop the js folder into the WebContent folder of your database

Creating the custom control to load the JavaScript libraries

Create the following ccMaskedInput custom control in your database

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<xp:this.resources>
		<xp:script src="js/jquery-1.7.1.min.js"
			clientSide="true">
		</xp:script>
		<xp:script src="js/x$.js"
			clientSide="true">
		</xp:script>
		<xp:script src="js/jquery.maskedinput-1.3.min.js"
			clientSide="true">
		</xp:script>
	</xp:this.resources>
</xp:view>

You now have a re-usable custom control which can be added to any of the XPages in your database.

Creating your XPage

• Create a new XPage and create a new Domino Document data source from one of the forms in the database.
• Drag and drop your fields to the XPage
• Drag and drop the ccMaskedInput custom control onto your XPage
• Add the following script block to the bottom of your XPage/custom control and change the fields names to match your field names. (Change the masks to match the masks you want on your form)

 	<xp:scriptBlock id="scriptBlock1">
		<xp:this.value><![CDATA[
		jQuery(function($){
   			x$("#{id:date1}").mask("99/99/9999");		//change the field name
   			x$("#{id:phone1}").mask("(999) 999-9999");	//change the field name
   			x$("#{id:SSN1}").mask("999-99-9999");		//change the field name
   			x$("#{id:custom1}").mask("99-99-aaaa-9");	//change the field name
		});

		]]></xp:this.value>
	</xp:scriptBlock>

And it’s as easy as that !

In a Nutshell

The Input Mask code:

• Adds the programmed “Mask” to the field as the page loads
• Tracks what you type and how many characters you have added so far
• Checks what you type and matches it against the allowable character list for that character at that position in the string
• Updates the mask accordingly and moves past the “Mask” characters is applicable.