problem with Jquery-Mask

Question

I’m having a problem creating a mask for a field that should receive both a Cpf and a cnpj it works normal as long as the user does not copy and paste the cnpj, when it copies cpnj to the blank field it is not complete but if you select what is in the field and paste again it comes complete, I have no idea what may be causing it.

var cpfOuCnpjComportamento = function (val) {
        if (val.length > 14)
            return '00.000.000/0000-00';
        else
            return '000.000.000-009';
    };
    var cpfOuCnpjOptions = {
        onKeyPress: function (val, e, field, cpfOuCnpjOptions) {
            field.mask(cpfOuCnpjComportamento.apply({}, arguments), cpfOuCnpjOptions);
        }
    };

    $('.cpfOuCnpj').mask(cpfOuCnpjComportamento, cpfOuCnpjOptions);

Answer 1

I recommend using the plugin jQuery Masked input, he’s better than the mask plugin.

Example of the use of masked input working with a similar CPF and CNPJ scheme in a single field:

jQuery(function($){
  $('.cpf-cnpj').change(function(){
    var campo = $(this).val();
    if (campo == "cpf"){	
      $("#label-cpf-cnpj").html('CPF');
      $("#InputCpf-cnpj").mask("999.999.999-99");
    }
    else if (campo == "cnpj"){
      $("#label-cpf-cnpj").html('CNPJ');
      $("#InputCpf-cnpj").mask("99.999.999/9999-99");
    }			
  });
});

<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.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

<input type="radio" class="cpf-cnpj" id="cpf-cnpj" name="cpf/cnpj" value="cpf"> CPF<br>
<input type="radio" class="cpf-cnpj" id="cpf-cnpj" name="cpf/cnpj" value="cnpj"> CNPJ<br>
<br>
<label id="label-cpf-cnpj">CPF/CNPJ</label> <input type="text" id="InputCpf-cnpj" name="cpf/cnpj">

I did some tests here copying and pasting Cpfs and/ or Cnpjs complete with the plugin in question and works normally.

Example of the use of mask plugin to visualize the difference between the two:

jQuery(function($){
  $('.cpf-cnpj').change(function(){
    var campo = $(this).val();
    if (campo == "cpf"){	
      $("#label-cpf-cnpj").html('CPF');
      $("#InputCpf-cnpj").mask("999.999.999-99");
    }
    else if (campo == "cnpj"){
      $("#label-cpf-cnpj").html('CNPJ');
      $("#InputCpf-cnpj").mask("99.999.999/9999-99");
    }			
  });
});

<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="cpf-cnpj" id="cpf-cnpj" name="cpf/cnpj" value="cpf"> CPF<br>
<input type="radio" class="cpf-cnpj" id="cpf-cnpj" name="cpf/cnpj" value="cnpj"> CNPJ<br>
<br>
<label id="label-cpf-cnpj">CPF/CNPJ</label> <input type="text" id="InputCpf-cnpj" name="cpf/cnpj">

Note that using the masked input, when the user clicks on the field the entire mask is already displayed facilitating for the same the display of how many digits should be inserted in the field, different from the mask plugin, where the mask will only appear gradually as the user enters the digits of the CPF or CNPJ.

Edit: Then follow a new example without using radio to select CPF or CNPJ:

$(document).ready(function () {
    $("#InputCpf-cnpj").mask("999.999.999-99?99999");

    $('#InputCpf-cnpj').keyup(function (e) {

        var query = $(this).val().replace(/[^a-zA-Z 0-9]+/g,'');

        if (query.length == 11) {
            $("#label-cpf-cnpj").html('CPF');
            $("#InputCpf-cnpj").mask("999.999.999-99?99999");
        }

        if (query.length == 14) {
            $("#label-cpf-cnpj").html('CNPJ');
            $("#InputCpf-cnpj").mask("99.999.999/9999-99");
        }
    });
});

<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.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<br>
<label id="label-cpf-cnpj">CPF/CNPJ</label><input id="InputCpf-cnpj" type="text">

Answer 2

I came in this post a little late, but it might help someone yet.

Just do it this way by passing the formatting plus the number of possible houses and a checker to fall into the next formatting. This way it will work either for in case the user type normally or Ctrl+v.

Example:

var maskCpjCnpj = function (val) {
return val.replace(/\D/g, '').length < 12 ?  '000.000.000-009999' : '00.000.000/0000-00';
},
ccOptions = {
    onKeyPress: function(val, e, field, options) {
        field.mask(maskCpjCnpj.apply({}, arguments), options);
    }
};

$('.cpf-cnpj-mask').mask(maskCpjCnpj, ccOptions);