Rule/Script to mask/unmask SSN field | Community
Skip to main content
K
kolluax
Level 3
September 9, 2025

Rule/Script to mask/unmask SSN field

  • September 9, 2025
  • 2 replies
  • 609 views

Hi all,

 

I created an Adaptive form and one of the requirements was to mask the PII information (SSN) on the form as the user types and exits the field. For this I have created a JS function that takes the value and replaces first five characters with * (asterisk) and sets the value back on the text field. This is working fine. 

 

Now as the user clicks back into the field, i wanted to show the original value. For this, i created a hidden field and before calling the mask JS function on the field exit, i also set the value of this hidden field with original value of the SSN. But i am unable to find an event that matches the ENTER event or Click event to trigger this script. I have built this form using Foundation components. Any ideas to implement would be helpful.

 

Thanks,

Abhishek

2 replies

HrishikeshKagne
Community Advisor
HrishikeshKagneCommunity Advisor
Community Advisor
September 10, 2025

Hi @kolluax ,

AEM Adaptive Forms:

Masking: keep your current approach (on exit/blur, replace first 5 digits with *).

Unmasking: instead of looking for an ENTER event, use the field’s focus event. In Adaptive Forms, that’s the enter event (fires when the field gets focus).

==>

On exit/blur - mask value + save original in hidden field.

On enter/focus - restore original value from the hidden field.

In AEM Forms, use enter = focus and exit = blur. That’s the right event pair to handle mask/unmask behavior.

Hrishikesh Kagane
    K
    kolluaxAuthor
    Level 3
    September 11, 2025

    Thanks @hrishikeshkagne .

     

    For masking, i used the fields Value commit not the exit/blur. I do not see neither of those.

    For unmasking, i do not see a focus event. Were you referring to the guideBridge ?

     

    Thanks.

    Abhishek

    rishim22446870
    Adobe Employee
    rishim22446870Adobe Employee
    Adobe Employee
    September 24, 2025

    @kolluax

    You can leverage the display pattern feature in foundation components for this use case. With display pattern, the behavior works as follows: when the field loses focus, it shows a masked display value (for example, with asterisks), and when the field regains focus, it reveals the original value again. This is the standard display value functionality.

    If you’ve already implemented your use case using value commit, you can use a custom function to modify the value. Then, by using the elementFocusChanged event, you can restore the original value on focus and apply your desired behavior. Reference: GuideBridge API – elementFocusChanged

    Recommendation is to use display pattern for these use-cases

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    September 12, 2025

    @kolluax Quick follow-up! Were you able to get this issue sorted out? If you did, please consider posting the solution you used so others can learn from it. And if any of the replies above were helpful—whether they fully solved your problem or just pointed you toward the right fix—marking one as accepted helps future community members find solutions more easily. Closing the loop here makes a real difference for everyone.

    Kautuk Sahni
    Terms & ConditionsAccessibility statement

    Loading footer...