Input Masking not be able to store Original value

Question

I have an input and I want to mask and format the value that you enter in that.I have tried with below

var tempVar = myInputValue.replace("/D/g","").match("/d/g{3}","/d/g{2}","/d/g{4}");
var maskedValue = myInputValue[0]."-".myInputValue[1]."-".myInputValue[2];

Now the formatting is coming if I enter 1234567890,it's converted 123-456-7890. But if I wanna replace those inputs with 'x', it is only changing the first character that I enter, but from second key press,since we are restricting characters, it is removing first 'x'.

I just want to change the entered number into "x" and retrieve the original value that I entered. Please suggest me a good way to do it. Thanks in Advance.Don't close this as I searched alot for this.

Answer 1

var data = ''
function keyDown()
{
  console.clear()
  event.preventDefault()

  if (!isNaN(event.key) & data.length <= 9) {
    data += event.key
    var mask = data.replace(/\d/g, "x")
    if (data.length > 3) {
      mask = mask.slice(0, 3) + "-" + mask.slice(3);
      if (data.length > 6) {
        mask = mask.slice(0, 7) + "-" + mask.slice(7);
      }
    }
    document.getElementById("input").value = mask
  }
  document.getElementById("divOutput").innerHTML = data
  console.log(data)
}

<input id="input" type="text" onkeydown="keyDown()"></br>
Original value (var data): <div id="divOutput"></div>