problem with Jquery-Mask

Question

problem with Jquery-Mask

Navigation

#1 by (1 votes)

1

I have a problem creating a mask for a field that should receive both a cpf and a cnpj it works normal since the user does not copy and paste the cnpj, when it copies the cpnj to the blank field it does not come complete but if you select what is in the field and paste it again it comes complete, I have no idea what can be causing this.

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

jquery jquery-mask-plugin front-end

asked by anonymous 30.11.2017 / 13:48

1 answer

Failed to pass html menu to CakePHP How to limit decimal places?

score 1 · Answer 1

I recommend using the jQuery masked input plugin, it is better than mask plugin .

Example of using masked input working with a similar CPF and CNPJ scheme in the same 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><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script><inputtype="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 testing here copying and pasting complete CPFs and / or CNPJs with the plugin in question and it works normally.

Example of using mask plugin to see 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><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script><inputtype="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 by using masked input , when the user clicks on the field the mask is already displayed in full, making it easier to see how many digits to insert in the field, other than mask plugin , where the mask only appears gradually as the user enters the digits of the CPF or CNPJ.

Edit: Here is a new example without using radio to select either the 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><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script><br><labelid="label-cpf-cnpj">CPF/CNPJ</label><input id="InputCpf-cnpj" type="text">