Use jQuery Mask to format ADF Input Component

 In this post, I am showing a very interesting and useful jQuery plugin - jQuery Mask Plugin. We can use this plugin to format (mask) input component of ADF form with minimal code

Here I'll show you some examples of masking

Follow these steps to implement this in ADF Application

Create a page in the view controller project of Fusion Web Application and drop an input text in it.

1. <af:inputText label="Label 1" id="it1" >
2. </af:inputText>

Now add the jQuery library to the page under the document tag

1. <af:resource type="javascript" source="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
2. <af:resource type="javascript" source="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"/>

Now I am writing a simple jQuery function that masks value of the input field in date format (dd/mm/yyyy)  and add this function to page using resource tag

1. <af:resource type="javascript">
2. function maskUserInput() {
3. $('input[name="it1"]').mask('00/00/0000');
4. }
5. </af:resource>

Add a client listener to inputText to call jQuery function as soon as the user starts typing

1. <af:inputText label="Label 1" id="it1" >
2. <af:clientListener method="maskUserInput" type="keyDown"/>
3. </af:inputText>

Now run and enter some value in the input field and with typing, it'll mask user input

Now try changing the format as per your requirement, Suppose I need to mask the phone number in (+XX)-XXXXXXXXXX format, so for that, I have used this function.

1. <af:resource type="javascript">
2. function maskUserInput() {
3. $('input[name="it1"]').mask('(+00)-0000000000');
4. }
5. </af:resource>

and output is

IP Address

1. <af:resource type="javascript">
2. function maskUserInput() {
3. $('input[name="it1"]').mask('099.099.099.099');
4. }
5. </af:resource>

Output is

You can always change the jQuery function as per your requirement.

Cheers 🙂 Happy Learning