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 example of masking

Follow these steps to implement this in ADF Application

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

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

Now add the jQuery library to the page under document tag

<af:resource type="javascript" source="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>
<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

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

 

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

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

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

Date

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

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

and output is

 

IP Address

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

Output is

You can always change jQuery function as per your requirement.

Cheers 🙂 Happy Learning