2

Bom dia galera. Eu tenho um input onde neste é digitado um valor e conforme o tamanho deste recebe a mascara de CPF ou CNPJ. O problema que estou tendo é que, quando é digitado um CPF com o tamanho correto por exemplo, se o usuario aperta a tecla TAB, ENTER ou qualquer outra, a mascara muda para a de CNPJ mesmo não acrescentando nenhum numero, ou seja, ele está reconhecendo essas teclas como caracter válido e muda a mascara. Eu consegui tirar a funcionalidade da tecla tab, por exemplo, de não ir para a proxima linha, mas ele continua mudando a mascara do valor. Há alguma maneira de eu tirar todas essas teclas ou bloquear o uso destas no input e deixar apenas que os numeros interfiram na mascara ?

HTML:

<div class="col-xs-5 col-sm-5 col-md-5 col-lg-3 text-center select_height" id="div_cnpj_fornecedor">
  <b id="cnpj_cpf">CNPJ:</b>
  <input name="cnpj" minlength="12" maxlength="20" class="font-pop" id="cnpj" placeholder="00.000.000/0000-00" required>
</div>

jQuery:

$(document).ready(function () {
    $("#cnpj").keydown(function () {
        try {
            $("#cnpj").unmask();
        } catch (e) { }

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

        if (tamanho < 11) {
            $("#cnpj").mask("999.999.999-99");
            $("#cnpj_cpf").text("CPF:");
        } else {
            $("#cnpj").mask("99.999.999/9999-99");
            $("#cnpj_cpf").text("CNPJ:");
        }

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

Estou utilizando este plugin: https://plugins.jquery.com/mask/

Agradeço a qualquer ajudar fornecida.

1
  • tentou colocar no input o type? text ou number
    – Diego
    31/10/2019 às 13:20

2 Respostas 2

3

Segundo seu código, toda vez que o usuário digita '999.999.999-99' e aperta TAB, como o evento é ativado no keydown o length é igual a 11 e por isso seu código executa o conteúdo dentro do else.

Para tentar resolver o problema eu mudei um pouco a ideia e criei dois masks escondidos conforme o código abaixo. Com esta lógica não há mais o problema do TAB e ENTER. Espero que ajude ;)

$(function(){
  $('#cpf').mask('999.999.999-99');
  $('#cnpj').mask('99.999.999/9999-99');

  $('#myInput').keyup(function(){
    const val = $(this).val().replace(/[^0-9]/g, '');
    console.log('val', val);
    if (val.length <= 11) {
      $('#cpf').val(val);
      $(this).val($('#cpf').masked());
      $('#cnpj_cpf').text('CPF');
    } else {
      $('#cnpj').val(val);
      $(this).val($('#cnpj').masked());
      $('#cnpj_cpf').text('CNPJ');
    }
  });
});
<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.js"></script>

<b id="cnpj_cpf">CNPJ:</b>
<input id="myInput" maxlength="18" required>
<input id="cnpj" style="display: none">
<input id="cpf" style="display: none">

1

Uma ideia é fazer um script para bloquear essas teclas. Segue exemplo de script:

<script>
$(function(){
    $("input").on("keydown", function (e) {
       // use which ou charCode ou keyCode (dependendo do navegador)
        var key = e.which || e.charCode || e.keyCode;
        // 9 é o caracter Unicode da tecla TAB
        if (key === 9) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    });
});

1
  • Luis, eu ja tinha feito um código como este, e a unica coisa que ele faz é tirar a funcionalidade do tab de pular a linha, por exemplo, mas se eu aperto ele ainda influencia no INPUT.
    – leozera
    31/10/2019 às 13:09

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 .