Javascript html上的掩码输入不起作用

我试图为输入创建一个掩码，但发生了一个奇怪的错误。我必须输入11个数字，我的面具必须这样：…-。但当我输入第六位数字时，我当前的输入变成空白。我不知道是什么问题

这是我的剧本：

function mascararCpf(){
   var cpf = document.getElementById("idCpf");

   if((cpf.value.length == 3) || (cpf.value.length == 6)){ 
           cpf.value += ".";
       return;
   }

   if(cpf.value.length == 9){
       cpf.value += "-";
       return;
   }
 }

这是我的输入：

<label> CPF: <input type="number" autocomplete="on" name="cpf" id="idCpf"   placeholder="Seu CPF"  required onblur="validarCpf()" onkeypress="mascararCpf()"></label>

试一试

<input type="text"  ...

试一试

<input type="text"  ...

---

那是因为你需要数点。作为长度的一部分。123.456是七个字符长

---

通常的做法是在案例4字段中放置多个输入字段，并在达到字段3的长度时从一个字段转到另一个字段。

这是因为需要计算点。作为长度的一部分。123.456是七个字符长

---

通常的做法是在案例4字段中放置多个输入字段，并在达到字段3的长度时从一个字段转到另一个字段。

如前所述，输入类型应为文本。此外，您应该考虑在附加'.'或'-'之后输入值的长度增加。

您的html无效。打开前应关闭-标记

这样更好。您可以在脚本中指定您的手。使用type=text，输入值也可以是非数字。如果希望掩码方法检查，则应添加对输入值的检查。一种暂定方法可以是：

// bind handler to the input field
document.querySelector('#idCpf').onkeypress = mascararCpf;
// the handler method, including a numeric-check for the entered value
function mascararCpf(e){
    var len = String(this.value).length; 
    this.value += len === 3 || len === 7 ? '.' : len === 11 ? '-' : '';
    return isNaN(+String.fromCharCode(e.keyCode)) ? false : true;
}

---

这里有一个例子演示了所有这些

前面提到的输入类型应该是文本。此外，您应该考虑在附加'.'或'-'之后输入值的长度增加。

您的html无效。打开前应关闭-标记

这样更好。您可以在脚本中指定您的手。使用type=text，输入值也可以是非数字。如果希望掩码方法检查，则应添加对输入值的检查。一种暂定方法可以是：

// bind handler to the input field
document.querySelector('#idCpf').onkeypress = mascararCpf;
// the handler method, including a numeric-check for the entered value
function mascararCpf(e){
    var len = String(this.value).length; 
    this.value += len === 3 || len === 7 ? '.' : len === 11 ? '-' : '';
    return isNaN(+String.fromCharCode(e.keyCode)) ? false : true;
}

---

下面是一个演示所有这些的示例

我也有类似的需求，所以我开发了以下代码。虽然还不是100%，但它确实有效

function editMask(mask,element,e) {
    if (e.keyCode >= 48 & e.keyCode <= 57 | e.keyCode >= 96 & e.keyCode <= 105 | e.keyCode == 46 | e.keyCode == 8) {
        var v = element.value;
        var N = v.replace(/\D/g,'');
        var L = N.length;
        var r = '';
        var resp = '';
        for (i=0;i<mask.length;i++) {
            if (mask[i] == '_') {
                if (N.length > 0) {
                    r = N[0];
                    N = N.substring(1,N.length);
                } else {
                    r = '_';
                }
            } else {
                r = mask[i];
                if (N.length > 0) {
                    L++;
                }
            }
            resp = resp+r;
        }
        element.value = resp;
        element.setSelectionRange(L,L);
    }
}

它在输入的onkeyup事件中调用：

<input type='text' size=20 id='insPFis_CPF' value='$CPF' onkeyup='javascript:editMask(\"___.___.___-__\",this,event)'>

---

您可能需要更改CNPJ、电话号码等的掩码格式。我希望这会有所帮助。

我也有类似的需要，因此我开发了以下代码。虽然还不是100%，但它确实有效

function editMask(mask,element,e) {
    if (e.keyCode >= 48 & e.keyCode <= 57 | e.keyCode >= 96 & e.keyCode <= 105 | e.keyCode == 46 | e.keyCode == 8) {
        var v = element.value;
        var N = v.replace(/\D/g,'');
        var L = N.length;
        var r = '';
        var resp = '';
        for (i=0;i<mask.length;i++) {
            if (mask[i] == '_') {
                if (N.length > 0) {
                    r = N[0];
                    N = N.substring(1,N.length);
                } else {
                    r = '_';
                }
            } else {
                r = mask[i];
                if (N.length > 0) {
                    L++;
                }
            }
            resp = resp+r;
        }
        element.value = resp;
        element.setSelectionRange(L,L);
    }
}

它在输入的onkeyup事件中调用：

<input type='text' size=20 id='insPFis_CPF' value='$CPF' onkeyup='javascript:editMask(\"___.___.___-__\",this,event)'>

---

您可能需要更改CNPJ、电话号码等的掩码格式。我希望这会有所帮助。

为了方便起见，这里有一个问题。validarCpf在哪里？问题与输入类型有关。number不接受123,45,6-something这样的格式我将输入类型改为text，它可以工作，但问题是它是一个移动应用程序，我使用phonegap构建我的应用程序，使用type=text对用户不好。我想使用type=number并屏蔽我的输入。如何解决？为了方便起见，这里有一个答案。另外，validarCpf在哪里？问题与输入的类型有关。number不接受123,45,6-something这样的格式我将输入类型改为text，它可以工作，但问题是它是一个移动应用程序，我使用phonegap构建我的应用程序，使用type=text对用户不好。我想使用type=number并屏蔽我的输入。我该如何解决它呢？是的，它是有效的，但正如我在评论中所说的，但我正在构建一个移动应用程序，并使用类型作为文本，这对用户来说不是一个好主意。有没有办法解决这个问题？是的，它是有效的，但正如我在上面的评论中所说，但我正在构建一个移动应用程序，并使用类型作为文本，这对用户来说不是一个好主意。有办法解决吗？谢谢Kooilnc，我更改了我的代码和它的作品，但问题是它是一个移动应用程序，我使用phonegap来构建我的应用程序，使用type=text对用户不好。我想使用type=number并屏蔽我的输入。是否使用return isNaN+String.fromCharCodee.keyCode？假：真；工作，但如果我点击。或者在空格上，一个空格被添加到输入中，我也不想要它。这只发生在手机上。谢谢Kooilnc，我更改了我的代码及其作品，但问题是这是一个手机应用程序，我使用phonegap来构建我的应用程序，使用type=text对用户不好。我想使用type=number并屏蔽我的输入。是否使用return isNaN+String.fromCharCodee.keyCode？假：真；工作，但如果我点击。或者在空格上，一个空格被添加到输入中，我也不想要它。这只发生在手机上。谢谢Arlaud，它是漫不经心的。。。但使用类型作为数字是行不通的，只能使用文本。使用类型作为数字我要做什么？@Caaarlos一旦数据即将发送，您需要解析数据，以便只保留数字…感谢Arlaud，这是无意的。。。但使用类型作为数字是行不通的，只能使用文本。使用类型作为数字，我必须做什么？@Caaarlos好的，一旦数据即将发送，您需要解析数据，以便只保留数字…