Digitalbush plugin for CNPJ and CPF masks in the same field

Asked

Viewed 2,982 times

3

I use the plugin below in my html fields to make the mask, I arose the need to put the mask cnpj and Cpf in the same fields, someone knows how to do this with this plugin?

http://digitalbush.com/projects/masked-input-plugin/

$("#cpf").mask("999.999.999-99");
$("#cnpj").mask("99.999.999/9999-99");

Thank you.

jquery html

  • With another plugin I know q da p do, could put the format of Cpf and cnpj.

  • So what I like about this is that it looks perfect, because when you click on the field it appears, unlike others that will appear as you type. I do not know if I put another plugin will conflict with this plugin that is already being used in other fields.

  • @Bacco I could not make it work with the answer that you mentioned being duplicated, it has no reference to the plugin that is being used.

2 answers

5


You can use the plugin jquery.inputmask to mask an input with different formats. The following code defines two formats the first for Cpf and the second for cnpj, when the user type the 15th the mask will change from Cpf to cpnj this is done with the option keepStatic: true that 'holds' the format until the entrance marries the next.

$("#doc").inputmask({mask: ['999.999.999-99', '99.999.999/9999-99'], keepStatic: true });

  • Thank you, I’ll test it now.

  • rray it worked perfectly, can you tell me if there is possibility of it conflict with the other plugin? Is there a problem using both on the same page?

  • @Mauricioferraz I believe that can not use quiet just do not confuse the name that are similar xD

  • rray take me just one more question, you know if there is the option of the mask appear in the field only when it is clicked instead of the Hover (when you put the mouse arrow on top)?

  • 1

    @Mauricioferraz has yes, add , showMaskOnHover: false after keepStatic: true

  • Face is perfect, thank you very much.

  • Good :D so I like this plugin hehe. @Mauricioferraz

  • use plugin CDN: https://cdnjs.com/libraries/jquery.inputmask ... more practical ;-)

  • Mine appears that inputmask is not a Function, because?

  • @Junior the plugin you are using is the same as the reply link? added jquery before?

  • set the path that was wrong, but to type the cnpj, I have to start typing and delete a number, just so change from Cpf to cnpj, if type the numbers it hangs on Cpf and does not let put more than 9 digits

  • @Junior I think it’s best to create a new question.

Show 7 more comments

2

I created and use this solution years ago in jQuery for the Plugin itself Maskedinput of Digitalbush:

$(".hibridCpf").on('focusin',function(){
    var target = $(this);
    var val = target.val();
    target.unmask();
    val = val.split(".").join("");
    val = val.split("-").join("");
    val = val.split("/").join("");
    target.val(val);
});
$(".hibridCpf").on('focusout',function(){
    var target = $(this);
    var val = target.val();
    val = val.split(".").join("");
    val = val.split("-").join("");
    val = val.split("/").join("");
    if (val.length==11) {
        target.mask("999.999.999-99");
        target.val(val);
    } else {
        if (val.length==14) {
            target.mask("99.999.999/9999-99");
            target.val(val);
        } else {
            target.val('');
        }
    }
});

Test this example on jsfiddle.

It is obvious that the solution put forward by @rray is far simpler and recommends, but there are those cases where it is not possible to replace the application’s Mask Plugin for N reasons, then the way and improvise like I did kkkk...

This server solution also for zip code fields where the user can report a Brazilian or American zip code, using a similar logic...

PS: A mask plugin that I recommend and started using is the Mask Plugin created by the Brazilian @igorescobar (Github), he gathered the Mask Input and Mask Money in a single with more customization options, worth checking out!

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.