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

Question

good evening.晚上好。 I wanna create a mask for my JavaScript project, using only Pure JavaScript, without any jQuery stuff or anything like that.我想为我的 JavaScript 项目创建一个面具，只使用纯 JavaScript，没有任何 jQuery 东西或类似的东西。 What a want to do is, while I'm writing a bunch of numbers, they will be placed in certain spots.想要做的是，当我在写一堆数字时，它们将被放置在某些位置。 Like, for the final format, I want to do "XXX.XXX.XXX-XX", but, while writing, "XXX."就像，对于最终格式，我想做“XXX.XXX.XXX-XX”，但是，在写的时候，“XXX”。 and then "XXX.XXX.", like that.然后是“XXX.XXX.”，就像这样。 Right now, my code is:现在，我的代码是：

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>

So, how can I make sure that, while I am writing the numbers, the dots will appear after the 3rd, 6th, and the hyphen after the 9th number?那么，我怎样才能确保在我写数字时，点会出现在第 3 个、第 6 个和第 9 个数字之后的连字符呢？ Thanks for the help!谢谢您的帮助！

Answer 1

\w matches any single letter, number or underscore (same as [a-zA-Z0-9_]). \w 匹配任何单个字母、数字或下划线（与 [a-zA-Z0-9_] 相同）。 You can customize and add only numbers and alphabets using /[a-zA-Z0-9]/g in match function.您可以在match function 中使用/[a-zA-Z0-9]/g自定义和仅添加numbers和alphabets 。

Intentionally I've used the condition e.key.== "Backspace" && e.key !== "Delete" to not add the characters in input if user use delete or Backspace key.如果用户使用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

You can directly change the value then set it to input like this您可以直接更改该值，然后将其设置为像这样输入

 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 制作数字掩码？

问题描述

2 个解决方案

解决方案1
2 已采纳 2021-05-11 03:55:10

解决方案2
0 2021-05-11 05:29:35

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2021-05-11 03:55:10

解决方案2 0 2021-05-11 05:29:35

解决方案1
2 已采纳 2021-05-11 03:55:10

解决方案2
0 2021-05-11 05:29:35