Dynamic fields mask for Javascript phone

Question

I know you have masks in jquery, for example jQuery Masked Input, but I am maintaining a system that was developed by another colleague and unfortunately is giving conflicts in the jquery that he implemented:

<script src="assets/js/jquery-3.1.1.min.js"></script>

To try to resolve the conflict, I tried to use the code below:

<script>var $jQuery = jQuery.noConflict();</script>

But unfortunately it didn’t work, because when I implement another jquery, some features stop working. I have the code below that provides this result:

 <table border="0" width="100%">
      <tr class='linhas'>
          <td  style="padding: 5px"><input type="text" name="NomePessoaAutorizada[]" class="form-control" placeholder="Nome completo" value=""></td>
          <td  style="padding: 5px; width: 8%"><input type="text" name="DDD[]" class="form-control" placeholder="DDD" value="" maxlength="2"></td>
          <td  style="padding: 5px"><input type="text" name="TelefoneCelularPessoaAutorizada[]" class="form-control pull-left" placeholder="Telefone celular" onkeypress="mascara(this, '#####-####')" maxlength="13"></td> <!-- data-inputmask="'alias': '(99)99999-9999'" -->
          <td  style="padding: 5px"><input type="text" name="RGPessoaAutorizada[]" class="form-control" placeholder="RG da pessoa autorizada" value=""></td>
          <td  style="padding: 5px"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
      </tr>
      <tr>
          <td colspan="3"><button type="button" class="adicionarCampo btn btn-primary" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Adicionar mais contatos</button></td>
      </tr>
    </table>

<script type="text/javascript">
     $(function () {
       function removeCampo() {
             $(".removerCampo").unbind("click");
             $(".removerCampo").bind("click", function () {
                if($("tr.linhas").length > 1){
                     $(this).parent().parent().remove();
                }
             });
       }
       $(".adicionarCampo").click(function () {
         if ($('.linhas').length < 5) {
             novoCampo = $("tr.linhas:first").clone();
             novoCampo.find('input[type="text"]').val("");
             novoCampo.find('select').val("");
             novoCampo.insertAfter("tr.linhas:last");
             removeCampo();
           }
       });
     });
 </script>

To avoid conflicts, I would like to know how to implement the mask in dynamic fields, but developed in Javascript and not in Jquery. Googling, I found this solution:

<script type="text/javascript">
function mascara(t, mask){
 var i = t.value.length;
 var saida = mask.substring(1,0);
 var texto = mask.substring(i)
 if (texto.substring(0,1) != saida){
 t.value += texto.substring(0,1);
 }
 }
</script>

It works in parts because it presents 02 problems. The first is that it also accepts letters and the second is that, although maxlength is 13 characters long, it is not accepting the given value.

Answer 1

Follows a method for telephone mask.

Source here.

Example

function mask(o, f) {
  setTimeout(function() {
    var v = mphone(o.value);
    if (v != o.value) {
      o.value = v;
    }
  }, 1);
}

function mphone(v) {
  var r = v.replace(/\D/g, "");
  r = r.replace(/^0/, "");
  if (r.length > 10) {
    r = r.replace(/^(\d\d)(\d{5})(\d{4}).*/, "($1) $2-$3");
  } else if (r.length > 5) {
    r = r.replace(/^(\d\d)(\d{4})(\d{0,4}).*/, "($1) $2-$3");
  } else if (r.length > 2) {
    r = r.replace(/^(\d\d)(\d{0,5})/, "($1) $2");
  } else {
    r = r.replace(/^(\d*)/, "($1");
  }
  return r;
}

<input type="text" id="phone" name="phone" onkeypress="mask(this, mphone);" onblur="mask(this, mphone);" />

Answer 2

Image format: (88) 9 9999-9999.

function phoneMask(v) {

  let r = v.replace(/\D/g, "");
  r = r.replace(/^0/, "");

  if (r.length > 11) {
    r = r.replace(/^(\d\d)(\d{5})(\d{4}).*/, "($1) $2-$3");
  } else if (r.length > 7) {
    r = r.replace(/^(\d\d)(\d{5})(\d{0,4}).*/, "($1) $2-$3");
  } else if (r.length > 2) {
    r = r.replace(/^(\d\d)(\d{0,5})/, "($1) $2");
  } else if (v.trim() !== "") {
    r = r.replace(/^(\d*)/, "($1");
  }
  return r;
}