Mask in html field does not work

Question

Good afternoon,

I have a page in my application to register customers , nothing out of the ordinary.

On this page , I have some fields ( cif ,rg , phone,phone_2 ,etc) that when typing are formatted with javascript with the following function:

*Turning the telephone : [phone] into (11)9999-9999

// Mascaras Javascript

function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}

function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}

function id( el ){
    return document.getElementById( el );
}

// aqui começa as mascaras 

function mtel(v){ //MASCARA PARA TELEFONE

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

window.onload = function atribuiMascaras(){ // FUNCAO QUE É ACIONADO AO CARREGAR A PAGINA ( WINDOW.ONLOAD )

    id('txtCel').onkeyup = function(){ //ATRIBUI O CAMPO COM ID txtCel A MASCARA DE TELEFONE
        mascara( this, mtel );
    }

It turns out, I can access this page and already have partially the data of that contact that is becoming a customer.

If I already have this partial data , when accessing the page , I take the contact ID from the Url and make a call to a controller to get the data from this client.

$(document).ready(function selectDadosContato(){        

var id_contato = <?=$dados[0];?>;
var tipo = '<?=$dados[1];?>';

jQuery.ajax
    ({  

        url: "/admin2/controllers/contatos/Contatos.php?id="+id_contato+"&tipo="+tipo, //URL de destino
        dataType: "json", //Tipo de Retorno
        success:
        function(data) {    

                var d = data.data_nascimento;
                var d = d.split('-');
                var data_nasc = d[2] + '/' + d[1] + '/' + d[0];

                document.getElementById('txtNome').value = data.nome;
                document.getElementById('txtCel').value = data.telefone;                    

             } //function(data);    
        });
});

Here is my problem , when I request and take the contact data and assign the value received in the html fields, I would need the masks of the fields to be activated, but the fields are filled in the way they come from the database.

From now on, grateful

Answer 1

Just assign the masks on the return of your ajax

mascara( document.getElementById('txtCel'), mtel);

---

jQuery.ajax
    ({  

        url: "/admin2/controllers/contatos/Contatos.php?id="+id_contato+"&tipo="+tipo, //URL de destino
        dataType: "json", //Tipo de Retorno
        success:
        function(data) {    

                var d = data.data_nascimento;
                var d = d.split('-');
                var data_nasc = d[2] + '/' + d[1] + '/' + d[0];

                document.getElementById('txtNome').value = data.nome;
                document.getElementById('txtCel').value = data.telefone;      

                //Chame a sua função de mascara         
                mascara( document.getElementById('txtCel'), mtel);

             } //function(data);    
        });
});

Answer 2

Usa https://plugins.jquery.com/jquery.inputmask

$(document).ready(
   $("#Cep").inputmask("99999-999");
   $('#telefone').inputmask("(99) 9999-9999[9]");
});