1

estou com um problema criei uma mascara para um campo que deve receber tanto um cpf como um cnpj ela funciona normal desde que o usuário não copie e cole o cnpj, quando ele copia o cpnj para o campo em branco ele não vem completo porem se você selecionar o que está no campo e colar novamente ele vem completo, não tenho a menor ideia do que pode está causando isso.

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

2 Respostas 2

3

Recomendo que utilize o plugin jQuery masked input, ele é melhor que o mask plugin.

Exemplo de uso do masked input funcionando com um esquema semelhante de CPF e CNPJ em um mesmo campo:

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">

Fiz alguns testes aqui copiando e colando CPFs e/ou CNPJs completos com o plugin em questão e funciona normalmente.

Exemplo de uso do mask plugin para visualizar a diferença entre os dois:

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">

Observe que utilizando o masked input, quando o usuário clica no campo a máscara já é exibida inteira facilitando para o mesmo a visualização de quantos dígitos deverá inserir no campo, diferente do mask plugin, em que a máscara só vai aparecendo aos poucos à medida que o usuário vai inserindo os dígitos do CPF ou CNPJ.

Edit: Segue então novo exemplo sem utilizar o radio para selecionar CPF ou 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">

4
  • o sitema em quem a mascara está inserida foi feita todo com mask-plugin e ja está em homologação, hoje não vale a pena a troca mas testarei o codigo que você mandou. Commented 30/11/2017 às 13:07
  • @MarceloSouza Mas não muda muita coisa, basta trocar a importação do mask plugin para a importação do masked input, observe que os dois códigos que postei acima são idênticos, mudando apenas a importação do plugin utilizado.
    – Leandro
    Commented 30/11/2017 às 13:09
  • olha o que você postou foi muito bom porém, a pedido do analista não deve ter checkbox para escolher qual, ele tem que ir digitando e conforme digitar a mascara ir trocando, então acabo voltando pro codigo que postei no inicio, o mask-plugin se perde a utilizar duas mascaras Commented 30/11/2017 às 13:34
  • @MarceloSouza Editei o post com um 3º novo exemplo sem o utilizar o input radio para escolher entre CPF ou CNPJ. Verifique se agora atende ao que você precisa.
    – Leandro
    Commented 30/11/2017 às 14:09
0

Cheguei nesse post meio tarde, mas pode ajudar alguém ainda.

Basta fazer desta forma, passando a formatação mais o numero de possíveis casas e um verificador para cair na próxima formatação. Desta forma funcionará tanto para no caso que o usuário digite normalmente ou de ctrl+v.

Exemplo:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .