entering social security number with dots for first 5 digits and then actual number

Question

I have am asp.net text field. I have this requirement that when the customer enters the social security number for eg 123456789 or 123-45-6789 and tabs out of that field and goes to another field, the social security number changes to:

XXXXX6789

OR

XXX-XX-6789

The fields that I have is like this:

<asp:TextBox runat="server" ></asp:TextBox>

Any help will be appreciated.

Answer 1

Something like this, but customized to your validation/inputs/framework:

 let hidden = document.getElementById("hidden"); let visible = document.getElementById("visible") const handleInput= () => { hidden.value = visible.value; console.log("handleInput") } const handleFocus = () => { visible.value = hidden.value; } const handleBlur = () => { let splitValue = visible.value.trim().replace(/-/g,"").split(""); let newValue = ""; for(let i = 0; i < splitValue.length; i++){ if (i<3) newValue += "X"; if (i===3) newValue += "-X"; if (i===4) newValue += "X"; if (i===5) newValue += "-" if (i>4) newValue += splitValue[i] } visible.value= newValue; }

 <input id="visible" onfocus="handleFocus()" onblur="handleBlur()" oninput="handleInput()"/> <input id="hidden" style="display:none"/>