I am trying to mask a value in the textbox component by using jQuery. When I click or tab in to the field it should show the complete value and once I tabout of the field it should mask all the digits except for last 4. When the user clicks or tabs in to the field I am triggering the jQuery focusin event and then I am trying to displaying the actual value. But its not working. Instead of showing the actual value its just showing the last 4 digits.
When I debug the code, the jQuery focusin event is getting triggered and its showing the actual value in the field but after that there is some script which getting executed within the "/etc/clientlibs/fd/af/I18N/en.js" which is overriding the value. I am not sure if this is coz of some internal script within AEM forms which is causing this issue. Do I need to call any AEM API or script for such kind of things. I also looked into AEM forms appearance framework but not sure whether its going to solve my issue.