Input with CPF/ CNPJ mask undergoing change by keys like TAB and ENTER

Question

Good morning guys. I have an input where this is typed a value and as the size of this gets the mask CPF or CNPJ. The problem I’m having is that when a CPF is typed with the correct size for example, if the user presses the TAB key, ENTER or any other, the mask changes to that of CNPJ even not adding any number, that is, he is recognizing these keys as valid character and changes the mask. I was able to take the functionality of the tab key, for example, from not going to the next line, but it keeps changing the value mask. Is there any way I can take out all these keys or block the use of these in the input and just let the numbers interfere with the mask ?

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

I am using this plugin: https://plugins.jquery.com/mask/

I appreciate any help provided.

Answer 1

According to your code, every time the user type '999999.999-99' and press TAB, as the event is activated on keydown the length is equal to 11 and so your code executes the content within the else.

To try to solve the problem I changed the idea a little and created two masks hidden according to the code below. With this logic there is no more problem of TAB and ENTER. I hope it helps ;)

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

Answer 2

One idea is to make a script to block these keys. Follow script example:

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