Mask with Jquery changing from fixed to mobile or vice versa

Question

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

$("#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 size variable exceeds the value 13 it no longer lets insert values in the input, even reversing the code by placing the size > 13 before, can make this comparison? or some other solution.
Obs.: I use the Jquery Mask plug-in.

Answer 1

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>

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

_References

• jQuery Mask Plugin

Answer 2

You can do it like 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>

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

Answer 3

Another possible solution, instead of comparing the size, would be the following:

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>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>

<input type="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">

Answer 4

After enough searching (in 2020)

This is how I made it work

$('#Telefone').mask("90000-0000")

Because 0 is mandatory and 9 is optional.