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
Hi,
Thanks for sharing the code.
Its working for me only for HTML tags but not ADF tags (af:inputText).
I compared the code, its the exactly same I am using for both HTML and ADF. I used ID instead of Name.
Still not working in adf.
can you guide me.