html上的掩码输入不起作用

Question

我正在尝试为我的输入创建一个掩码，但发生了一个奇怪的错误。 我必须输入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>

Answer 1

试试吧

<input type="text"  ...

输入类型number

DEMO

如果你想在焦点上打开数字小键盘，我建议你使用

<input type="tel"  ...

另一个DEMO

Answer 2

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

通常的做法是放置几个输入字段（在您的情况下为4个字段），并在达到字段（3）的长度时从一个字段转到另一个字段。

Answer 3

如前所述，输入类型应为text 。 此外，您应该考虑在附加'。'后输入值的长度会增加。 要么 '-'。

你的HTML无效。 在打开<input>之前，应该关闭<label> -tag。

最好不要使用内联处理程序 。 您可以在脚本中分配您的处理程序。 使用type="text" ，输入值也可以是非数字。 如果您希望mask-method检查是否应添加对输入值的检查。 一种暂定的方法可能是：

// 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;
}

这是一个jsFiddle演示这一切

Answer 4

我有类似的需求，所以我开发了以下代码。 还不是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的掩码格式，电话号码等。我希望它有所帮助。