CODEWITHSUNDEEP
javascriptc#asp.net
Anjali
Anjali

Reputation: 2708

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

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.

Upvotes: 0

Views: 286

Answers (1)

Pavlos Karalis
Pavlos Karalis

Reputation: 2976

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

Upvotes: 1

Related Questions