Mascara Doesn’t Work

Question

my mask doesn’t work when I wear a variable. for example:

 Projeto.Aplicacao.ViewModel.Clientes.ClienteViewModel cliente = (Projeto.Aplicacao.ViewModel.Clientes.ClienteViewModel)(ViewBag.Clientes);

<span id="Cnpj">@cliente.Cnpj</span>

<script>
    function get_mask(input_value, event, element, options) {
        // Remove caracteres não numéricos
        var numbers = input_value.replace(/\D+/g, '');
        return numbers.length <= 11 ? '000.000.000-000' : '00.000.000/0000-00';
    }

    // Usa a função `get_mask` para definir a máscara
    $('#Cnpj').mask(get_mask, {
        onKeyPress: function (input_value, event, element, options) {
            element.mask(get_mask, options);
        }
    });

</script>

But if I use the DisplayFor(Model => Model.Cnpj) he masks without problem....

Answer 1

Use this javascript, it is very useful to mask input inputs, create a file inside your js folder and paste this code there, then call the via .

Contents of the mask.js

function mascara(o, f) {
    v_obj = o
    v_fun = f
    setTimeout("execmascara()", 1)
}
function execmascara() {
    v_obj.value = v_fun(v_obj.value)
}
function mcep(v) {
    v = v.replace(/\D/g, "")                    //Remove tudo o que nao eh digito
    v = v.replace(/^(\d{5})(\d)/, "$1-$2")         //Esse � t�o f�cil que n�o merece explica��es
    return v
}
function mtax(v) {
	v = v.replace(/\D/g, "");
	v = v.replace(/(\d)(\d{7})$/, "$1.$2");    //Coloca o . antes dos �ltimos 3 d�gitos, e antes do verificador
    v = v.replace(/(\d)(\d{4})$/, "$1.$2");
	v = v.replace(/(\d)(\d)$/, "$1 %");
	return v;
}
function mtel(v) {
    v = v.replace(/\D/g, "");             //Remove tudo o que n�o � d�gito
    v = v.replace(/^(\d{2})(\d)/g, "($1) $2"); //Coloca par�nteses em volta dos dois primeiros d�gitos
    v = v.replace(/(\d)(\d{4})$/, "$1-$2");    //Coloca h�fen entre o quarto e o quinto d�gitos
    return v;
}

function mtel(v) {
    v = v.replace(/\D/g, "");             //Remove tudo o que n�o � d�gito
    v = v.replace(/^(\d{2})(\d)/g, "($1) $2"); //Coloca par�nteses em volta dos dois primeiros d�gitos
    v = v.replace(/(\d)(\d{4})$/, "$1-$2");    //Coloca h�fen entre o quarto e o quinto d�gitos
    return v;
}
function cnpj(v) {
    v = v.replace(/\D/g, "")                           //Remove tudo o que n�o � d�gito
    v = v.replace(/^(\d{2})(\d)/, "$1.$2")             //Coloca ponto entre o segundo e o terceiro d�gitos
    v = v.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3") //Coloca ponto entre o quinto e o sexto d�gitos
    v = v.replace(/\.(\d{3})(\d)/, ".$1/$2")           //Coloca uma barra entre o oitavo e o nono d�gitos
    v = v.replace(/(\d{4})(\d)/, "$1-$2")              //Coloca um h�fen depois do bloco de quatro d�gitos
    return v
}
function mcpf(v) {
    v = v.replace(/\D/g, "")                    //Remove tudo o que n�o � d�gito
    v = v.replace(/(\d{3})(\d)/, "$1.$2")       //Coloca um ponto entre o terceiro e o quarto d�gitos
    v = v.replace(/(\d{3})(\d)/, "$1.$2")       //Coloca um ponto entre o terceiro e o quarto d�gitos
    //de novo (para o segundo bloco de n�meros)
    v = v.replace(/(\d{3})(\d{1,2})$/, "$1-$2") //Coloca um h�fen entre o terceiro e o quarto d�gitos
    return v
}
function mdata(v) {
    v = v.replace(/\D/g, "");                    //Remove tudo o que n�o � d�gito
    v = v.replace(/(\d{2})(\d)/, "$1/$2");
    v = v.replace(/(\d{2})(\d)/, "$1/$2");

    v = v.replace(/(\d{2})(\d{2})$/, "$1$2");
    return v;
}
function mtempo(v) {
    v = v.replace(/\D/g, "");                    //Remove tudo o que n�o � d�gito
    v = v.replace(/(\d{1})(\d{2})(\d{2})/, "$1:$2.$3");
    return v;
}
function mhora(v) {
    v = v.replace(/\D/g, "");                    //Remove tudo o que n�o � d�gito
    v = v.replace(/(\d{2})(\d)/, "$1:$2");
    return v;
}

function mhoraminuto(v) {
    v = v.replace(/\D/g, "");                    //Remove tudo o que n�o � d�gito
    v = v.replace(/(\d{2})(\d)/, "$1:$2");
    v = v.replace(/(\d{2})(\d)/, "$1:$2");
    return v;
}
function mrg(v) {
    v = v.replace(/\D/g, "");                                      //Remove tudo o que n�o � d�gito
    v = v.replace(/(\d)(\d{7})$/, "$1.$2");    //Coloca o . antes dos �ltimos 3 d�gitos, e antes do verificador
    v = v.replace(/(\d)(\d{4})$/, "$1.$2");    //Coloca o . antes dos �ltimos 3 d�gitos, e antes do verificador
    v = v.replace(/(\d)(\d)$/, "$1-$2");               //Coloca o - antes do �ltimo d�gito
    return v;
}
function mnum(v) {
    v = v.replace(/\D/g, "");                                      //Remove tudo o que n�o � d�gito
    return v;
}
function mvalor(v) {
    v = v.replace(/\D/g, "");//Remove tudo o que nao e digito
    v = v.replace(/(\d)(\d{8})$/, "$1.$2");//coloca o ponto dos milhoes
    v = v.replace(/(\d)(\d{5})$/, "$1.$2");//coloca o ponto dos milhares

    v = v.replace(/(\d)(\d{2})$/, "$1,$2");//coloca a virgula antes dos 2 ultimos digitos
    return v;
}

function mvalorb(v) {
    v = v.replace(/\D/g, "");//Remove tudo o que nao e digito
    v = v.replace(/(\d)(\d{8})$/, "$1.$2");//coloca o ponto dos milhoes
    v = v.replace(/(\d)(\d{5})$/, "$1.$2");//coloca o ponto dos milhares

    v = v.replace(/(\d)(\d{2})$/, "$1.$2");//coloca a virgula antes dos 2 ultimos digitos
    return v;
}

<label for="fone">Fone</label>
<input type="text" name="fone" id="fone" onkeyup="mascara(this,mtel);">


<p>
 <label for="cep">CEP</label>
 <input type="text" name="cep" id="cep" value="" maxlength="10" onkeyup="mascara(this,mcep);">
</p>
<p>
 <label for="cpf">CPF</label>
 <input type="text" name="cpf" id="cpf" value="" maxlength="14" onkeyup="mascara(this,mcpf);">
 </p>

Now in your form if it is a phone field for example:

<input type="text" name="fone" id="fone" class="sua_class_css" value="" onkeyup="mascara(this,mtel);">

Ah quer um input para CEP:

<input type="text" name="cep" onkeyup="mascara(this,mcep);">

Bom proveito!