Use jQuery Mask to format ADF Input Component

Sharing is Caring

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

Mask date format jquery

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

Mask phone number format jquery

 

IP Address

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

Output is

Mask IP Address jQuery

You can always change jQuery function as per your requirement.

Cheers 🙂 Happy Learning

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

Leave a Reply

Your email address will not be published. Required fields are marked *