输入掩码无法存储原始值

Question

我有一个输入框，希望能够对输入的值进行掩码和格式化。我尝试了以下方法：

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

现在我输入1234567890时会自动转换为123-456-7890。但是如果我想用'x'替换这些输入，它只会更改我输入的第一个字符，然后从第二个按键开始，因为我们正在限制字符，它会删除第一个'x'。

我只想将输入的数字更改为"x"并检索我输入的原始值，请建议一个好方法来完成这个任务。谢谢你的帮助。请不要关闭此请求，因为我为此进行了大量搜索。

- GautamD31

---

你能提供期望输出吗？ - Rodrigo Ferreira

在每次按键时将1234567890转换为xxx-xx-xxxx，并同时考虑退格和删除，保持输入的字符串不变。例如，如果我到了6并将其删除，则我的实际值应该是123457890，并在弹出窗口中显示为带有x的形式。 - GautamD31

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>

- Srdjan M.

---

我认为这回答了OP的部分问题。不过，如果用户想要按退格键怎么办？从用户体验角度来看，必须支持退格键。 - Keval Domadia

Answer 2

根据您的示例，我认为您试图做的事情类似于这样：

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

仔细查看replace和match中的regExp，为了捕获这些值，您需要用括号将它们包裹起来。

- Rodrigo Ferreira

---

但是需要存储实际字符串对吧。它会将123转换为xxx，但我如何维护实际字符串数据，考虑到任何位置的退格和删除。 - GautamD31