Mask with Jquery changing from fixed to mobile or vice versa

Question

Mask with Jquery changing from fixed to mobile or vice versa

Navigation

#1 by (5 votes)
#2 by (2 votes)
#3 by (0 votes)

2

I have a JQuery mask for phone, depending on how much information the user type I understand if it is cell phone or landline. The fixed mask: (55) 9999-9999
for mobile: (55) 99999-9999
the mask code:

$("#Telefone").keydown(function () {
var tamanho = $("#Telefone").val().length;
if (tamanho <= 13) {
    $("#Telefone").mask("(99)9999-9999");
} else if (tamanho > 13) {
$("#Telefone").mask("(99)99999-9999");
}});

The problem is that only the fixed part works, when the variable size exceeds the value 13 it no longer lets you enter values in the input , even by inverting the code by placing the size > 13 before, can you make this comparison? or some other solution. Note: I use the JQuery mask plug-in.

javascript jquery mask

asked by anonymous 18.08.2017 / 17:30

3 answers

2

You can do this:

$("input.telefone").focusout(function() {
    var phone, element;
    element = $(this);
    element.unmask();
    phone = element.val().replace(/\D/g, '');
    if (phone.length > 10) {
        element.mask("(99) 99999-9999");
    } else {
        element.mask("(99) 9999-9999?9");
    }
}).trigger('focusout');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>

Telefone: <input type="text" class="telefone" />

18.08.2017 / 17:41

0

Another possible solution, rather than comparing the size would be as follows:

jQuery(function($){
  $('.tipo').change(function(){
    var campo = $(this).val();
    if (campo == "fixo"){	
      $("#Telefone").val('');
      $("#labelTelefone").html('Fixo');
      $("#Telefone").mask("(99)9999-9999");
    }
    else if (campo == "celular"){
      $("#Telefone").val('');
      $("#labelTelefone").html('Celular');
      $("#Telefone").mask("(99)99999-9999");
    }			
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script><inputtype="radio" class="tipo" name="tipo_telefone" value="fixo">Fixo<br>
<input type="radio" class="tipo" name="tipo_telefone" value="celular">Celular<br><br>
<label id="labelTelefone">Telefone</label><input type="text" id="Telefone">

18.08.2017 / 17:51

Count substrings within a string Problem in creating list in Vue.js

score 5 · Accepted Answer

Examples:

jQuery Mask Plugin

$(document).ready(function(){
  var SPMaskBehavior = function (val) {
    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
  },
  spOptions = {
    onKeyPress: function(val, e, field, options) {
        field.mask(SPMaskBehavior.apply({}, arguments), options);
      }
  };

  $('#tel').mask(SPMaskBehavior, spOptions);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>

<input type="text" name="tel" id="tel">

jQuery Mask Plugin