64

Olá, busquei por essa dúvida nas perguntas, porém não a consegui encontrar. Pois bem, gostaria de fazer com que um campo tivesse as máscaras de cpf e cnpj dependendo da quantidade de caracteres digitados. Aqui não dá totalmente certo, pois com vários testes que fiz aqui, esse meu código não deu resultado que preciso. Não sei se devo apenas alterar, ou se preciso fazer outro.

Segue o código:

$("#cpfcnpj").keypress(function(){
    $("#cpfcnpj").unmask();
    var tamanho = $("#cpfcnpj").val().length;

    if(tamanho == 11){
        $("#cpfcnpj").mask("999.999.99-99");
    } else if(tamanho == 14){
        $("#cpfcnpj").mask("99.999.999/9999-99");
    }                   
});

Obs: Estou usando esse plugin.

2
  • Segue o tutorial https://github.com/RobinHerbots/jquery.inputmask e cdn https://cdnjs.com/libraries/jquery.inputmask até mais.
    – KingRider
    Commented 27/06/2016 às 14:50
  • Diego você viu a minha resposta ? Commented 30/06/2018 às 13:39

8 Respostas 8

52

Tente usar o operador maior igual ou menor igual, segue abaixo um exemplo.

$("#cpfcnpj").keydown(function(){
    try {
        $("#cpfcnpj").unmask();
    } catch (e) {}

    var tamanho = $("#cpfcnpj").val().length;

    if(tamanho < 11){
        $("#cpfcnpj").mask("999.999.999-99");
    } else {
        $("#cpfcnpj").mask("99.999.999/9999-99");
    }

    // ajustando foco
    var elem = this;
    setTimeout(function(){
        // mudo a posição do seletor
        elem.selectionStart = elem.selectionEnd = 10000;
    }, 0);
    // reaplico o valor para mudar o foco
    var currentValue = $(this).val();
    $(this).val('');
    $(this).val(currentValue);
});

Exemplo no JSFiddler: https://jsfiddle.net/z5qmwn1d/

22
  • 3
    Descenessário esse if no else... Commented 28/10/2015 às 13:24
  • 3
    Aqui ele está voltando um caractere quando passa no ponto :( Commented 20/11/2017 às 21:53
  • 4
    Testei e não funciona corretamente, ele volta uma casa quando está digitando, teste a sequencia 123456789 e verá o erro.
    – Paulo
    Commented 28/12/2017 às 13:32
  • 2
    Tentei realizar um teste e está com um bug Commented 28/12/2017 às 15:21
  • 2
    @DenisRudneideSouza realmente, pode ter sido alguma atualização de browser, antes funcionava normalmente. Editei a resposta com a correção desse bug. Commented 6/01/2018 às 20:49
49

Na documentação dele já tem um exemplo que é: On-the-fly mask change, ele usou exemplo com CEP, só basta trocar para CPF.

Veja o código abaixo, como funciona o CPF e CNPF no mesmo campo:

var options = {
    onKeyPress: function (cpf, ev, el, op) {
        var masks = ['000.000.000-000', '00.000.000/0000-00'];
        $('.cpfOuCnpj').mask((cpf.length > 14) ? masks[1] : masks[0], op);
    }
}

$('.cpfOuCnpj').length > 11 ? $('.cpfOuCnpj').mask('00.000.000/0000-00', options) : $('.cpfOuCnpj').mask('000.000.000-00#', options);
<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.10/jquery.mask.js"></script>

<input class="cpfOuCnpj" value="11111111111" type="text">

Documentação: https://igorescobar.github.io/jQuery-Mask-Plugin/

Se preferir em JSfiddle: http://jsfiddle.net/znuph72f/375/

Segue a discussão: https://github.com/igorescobar/jQuery-Mask-Plugin/issues/53

4
  • 4
    Essa deveria ser a resposta correta, já que o marcado acima apresenta bugs com backspace, ao tentar apagar o que foi digitado. Commented 6/01/2018 às 21:03
  • 1
    Matheus Miranda, muito bom, estava precisando de uma solução dessa, entrei aqui no forum e vi a sua solução e te informo que estou usando ela cara. Muito simples e pequena. Parabéns.
    – Ger
    Commented 5/10/2018 às 20:11
  • @EdeGerSil que bom você gostou e seja feliz :D Commented 5/10/2018 às 20:16
  • Esta deve ser a solução correta. Limpa e de acordo com a documentação. Commented 23/01/2020 às 12:26
13

A solução proposta não funciona muito bem porque a condição booleana escrita pode apresentar anomalias no evento 'focusout'.

proponho a seguinte solução:

$(document).on('keydown', '[data-mask-for-cpf-cnpj]', function (e) {

    var digit = e.key.replace(/\D/g, '');

    var value = $(this).val().replace(/\D/g, '');

    var size = value.concat(digit).length;

    $(this).mask((size <= 11) ? '000.000.000-00' : '00.000.000/0000-00');
});

Esta solução é melhor nos seguintes aspectos:

  1. Trabalha o seletor tendo o documento como escopo, ou seja, caso o elemento seja inserido posteriormente ao carregamento da DOM continua funcional.
  2. Remove a necessidade de utilizar a função 'setTimeout' para ajustar o seletor.
  3. Utiliza o atributo 'data-mask-for-cpf-cnpj' para criar um Javascript não-obstrutivo, que deixa o código limpo, ou seja seu elemento ficaria bem elegante:

    ex.: < input type="text" data-mask-for-cpf-cnpj />

2
  • 2
    Melhor solução possível! Obrigado man. Commented 31/10/2018 às 18:09
  • 1
    incrível sua solução... resolveu meu problema e anda criei algumas variações pra telefone etc... Commented 11/11/2020 às 19:00
5

Você esta usando que Plugin? caso seja o Maskedinput da Digitalbush segue um exemplo:

$(".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('');
        }
    }
});

Teste esse exemplo no jsfiddle.

Essa solução server também para campos de CEP onde o usuário pode informar um Código postal brasileiro ou americano, usando uma lógica similar...

PS: Um plugin de mascara que recomendo e passei a utilizar é o Mask Plugin criado pelo Brasileiro @igorescobar (Github), ele reuni o Mask Input e Mask Money em um só com mais opções de personalização, vale a pena conferir!

Também existe uma solução mais simples para sua pergunta postada pelo @rray nessa pergunta, porem usa outro Plugin chamado Input Mask.

3

Desse jeito funcionou pra mim. No focusin você remove a máscara, no focusout você aplica a máscara, removendo os caratéres especiais.

$(document).ready(function(e) {
  $(".cpfCnpj").unmask();
  $(".cpfCnpj").focusout(function() {
    $(".cpfCnpj").unmask();
    var tamanho = $(".cpfCnpj").val().replace(/\D/g, '').length;
    if (tamanho == 11) {
      $(".cpfCnpj").mask("999.999.999-99");
    } else if (tamanho == 14) {
      $(".cpfCnpj").mask("99.999.999/9999-99");
    }
  });
  $(".cpfCnpj").focusin(function() {
    $(".cpfCnpj").unmask();
  });
});
3

$('#cpfcnpj').mask('000.000.000-00', {
  onKeyPress : function(cpfcnpj, e, field, options) {
    const masks = ['000.000.000-000', '00.000.000/0000-00'];
    const mask = (cpfcnpj.length > 14) ? masks[1] : masks[0];
    $('#cpfcnpj').mask(mask, options);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" crossorigin="anonymous"></script>

<div>
  <label>Insira um CPF ou CNPJ: </label>
  <input name="cpfcnpj" id="cpfcnpj" />
</div>

0
2

Passei por este problemas também, onde era necessário ter uma mascara dinâmica que pudesse mudar de forma para CPF ou CNPJ. E como estou a usar apenas Javascript utilizei uma biblioteca que usa Vanilla Javascript para criar mascaras.

imask js

Usando o imask você pode criar uma mascara dinâmica passando um array para a propriedade mask onde contém a definição de suas mascaras. E como regra de mudança simplesmente defina o máximo de caracteres que uma das mascara vai conter em maxLenght, veja um exemplo:

var maskCpfOuCnpj = IMask(document.getElementById('cpfcnpj'), {
			mask:[
				{
					mask: '000.000.000-00',
					maxLength: 11
				},
				{
					mask: '00.000.000/0000-00'
				}
			]
		});
<script src="https://unpkg.com/imask"></script>
<input id="cpfcnpj" type="text" placeholder="digite o CPF ou CNPJ" name="cpfcnpj" required>

O maxLength da mascara do CPF foi especificado para 11 dígitos, claro que podem haver variações, mas seria fácil implementar essas variações para definir a mascara.

A ideia do IMask é o processamento do input simplesmente comparando o estado de antes e depois, sendo as mudanças de estados obtidas através do evento keydown que fornece o estado dos valores.

Veja um guia para aprender mais sobre o imask js.

0

Fiz essa, simples, só com Javascript. Basta por a Classe no input.

var x = document.getElementsByClassName("cpfcnpj");
for(i=0;i<x.length;i++){ x[i].addEventListener('focus',function(e){ document.getElementById(e.target.id).select(); }); }
for(var i = 0; i < x.length; i++) { x[i].addEventListener('keyup', myFunction, false); }
function myFunction(e)
{
    x = '';
    if(e.keyCode == 8 || e.keyCode == 46){
        return false;
    }
    if(e.keyCode >= 48 || e.keyCode <= 57){

        var id = e.target.id;
        document.getElementById(id).setAttribute('maxlength',18);
        var str = e.target.value.replace(/\D/g,''); 
        //var str = str.replace(/^0+/, ''); 
        var len = str.length; // 
        if(len==11){ 
            x = str.substr(0, 3) + '.' + str.substr(3, 3) + '.' + str.substr(6, 3) + '-' + str.substr(9, 2);; // 510.791.784-49
        }else if(len>11 && len<15){ 
            x = str.substr(0, 2) + '.' + str.substr(2, 3) + '.' + str.substr(5, 3) + '/' + str.substr(8, 4) + '-' + str.substr(12, 2);  // 04.498.492/0001-67
        }else{
            x = str;
        }
        document.getElementById(id).value = x;
    }
}
<input id="doc" type="text" class="cpfcnpj">

1

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 .