Dynamic field mask for phone in Javascript

Question

Dynamic field mask for phone in Javascript

Navigation

#1 by (1 votes)

0

I know that it has masks in jquery, such as jQuery Masked Input, however I am doing maintenance on 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 did not work, because when I implement another jquery, some features will not work. I have the following code that gives 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>

Toavoidconflicts,I'dliketoknowhowtoimplementthemaskindynamicfields,butdevelopedinJavaScriptratherthaninJquery.PlungingintoGoogle,Ifoundthissolution:

<scripttype="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 has 02 problems. The first is that it also accepts letters and the second is that although the maxlength is 13 characters in value, it is not accepting the reported value.

javascript

asked by anonymous 25.09.2018 / 18:27

1 answer

Best method to load images Get element by id add two paragraphs

score 1 · Accepted Answer

Following is a method for phone masking.

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);" />