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 e.g. 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.

SO you store the value into a hidden input and you change the value of the textbox. — epascarello, Jun 29 '20 at 18:09
you meant that you have to change 123456789 to 123-45-6789 when the control goes to another field? — naveen, Jun 29 '20 at 18:51

Pavlos Karalis · Accepted Answer · 2020-06-29T22:57:30.340

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"/>

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

1 Answers1