Rule/Script to mask/unmask SSN field

[kolluax]

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

[HrishikeshKagne]

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.