如何仅使用 JavaScript 制作数字掩码？

Question

晚上好。我想为我的 JavaScript 项目创建一个面具，只使用纯 JavaScript，没有任何 jQuery 东西或类似的东西。想要做的是，当我写一堆数字时，它们将被放置在特定的位置。比如，对于最终格式，我想做“XXX.XXX.XXX-XX”，但是在写“XXX”时。然后是“XXX.XXX”，就像那样。现在，我的代码是：

const naosei = document.getElementById('ehistoai');

naosei.addEventListener(onfocus, validarCPF)

function validarCPF(){
    var cpf = naosei.value;

    if (cpf.length === 3){
        cpf1 = cpf + '.';
        document.forms[0].cpf.value = cpf1;
        return true;
    }
    if (cpf1.length === 6){
        cpf2 = cpf1 + '.';
        document.forms[0].cpf1.value = cpf2;
        return true;
    }
    if (cpf2.length === 9){
        cpf3 = cpf2 + '-';
        document.forms[0].cpf2.value = cpf3;
        return true;
    }
}

<!DOCTYPE html>
<html>  
<head>
        <meta charset="UTF-8">
        <title>Placa</title>
</head>
<body>
    <form>
        <p>
        <label>Insira a placa do carro:
        <input type="text" name="placa" id='ehistoai' onkeyup="validarPlaca()" placeholder="ABC-1234" maxlength="14" autofocus>
        </label>
        </p>
    </form>
    <script src="main3.js"></script>
</body>
</html>

那么，我怎样才能确保在我写数字时，点会出现在第 3、6 个数字之后，连字符出现在第 9 个数字之后？感谢您的帮助！

Answer 1

\w matches any single letter, number or underscore (same as [a-zA-Z0-9_]). You can customize and add only numbers and alphabets using /[a-zA-Z0-9]/g in match function.

如果用户使用 delete 或 Backspace 键，我故意使用条件 e.key !== "Backspace" && e.key !== "Delete" 不在输入中添加字符。

const naosei = document.getElementById("ehistoai");

naosei.addEventListener(onfocus, validarCPF);

function validarCPF(e) {
  if (e.key !== "Backspace" && e.key !== "Delete") {
    var cpf = naosei.value.match(/\w/g) ?? "";
    if (cpf.length >= 3) cpf.splice(3, 0, ".");
    if (cpf.length >= 7) cpf.splice(7, 0, ".");
    if (cpf.length >= 11) cpf.splice(11, 0, "-");
    naosei.value = cpf.join("");
  }
}

naosei.addEventListener("keyup", validarCPF);

<form>
  <p>
    <label>Insira a placa do carro:
                <input type="text" name="placa" id='ehistoai' placeholder="ABC-1234" maxlength="14" autofocus>
            </label>
  </p>
</form>

Answer 2

你可以直接改值然后设置成这样输入

const naosei = document.getElementById('ehistoai');

const rules = {
  3: '.',
  7: '.',
  11: '-',
}
function valida(val){
    console.log(val)
    const valArr = val.split('')
    for (const key in rules) {
      const i = Number(key);
      if (valArr.length >= (i + 1) && valArr[i] !== rules[i]) {
        valArr[i - 1] = valArr[i - 1] + rules[i];
      }
    }
    const valStr = valArr.join('');
    naosei.value = valStr;
}

<!DOCTYPE html>
<html>  
<head>
        <meta charset="UTF-8">
        <title>Placa</title>
</head>
<body>
    <form>
        <p>
        <label>Insira a placa do carro:
        <input type="text" name="placa" id='ehistoai' oninput="valida(this.value)" placeholder="ABC-1234" maxlength="14" autofocus>
        </label>
        </p>
    </form>
    <script src="main3.js"></script>
</body>
</html>

如何仅使用 JavaScript 制作数字掩码？

How to make a number mask using only JavaScript?

html

javascript

format