Máscara inteligente para CPF e CNPJ

Para criar uma máscara em um campo de input que mude conforme a quantidade de dígitos inseridos (CPF ou CNPJ), você pode usar JavaScript para lidar com a lógica da máscara. Aqui está um exemplo de como fazer isso:

HTML:

<label for="documento">CPF ou CNPJ:</label>
<input type="text" id="documento" oninput="aplicarMascara()" />

JavaScript:

function aplicarMascara() {
  const input = document.getElementById('documento');
  let valor = input.value.replace(/\D/g, ''); // Remove todos os caracteres não numéricos

  if (valor.length <= 11) {
    // CPF (###.###.###-##)
    valor = valor.replace(/(\d{3})(\d)/, '$1.$2');
    valor = valor.replace(/(\d{3})(\d)/, '$1.$2');
    valor = valor.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
  } else {
    // CNPJ (##.###.###/####-##)
    valor = valor.replace(/^(\d{2})(\d)/, '$1.$2');
    valor = valor.replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3');
    valor = valor.replace(/\.(\d{3})(\d)/, '.$1/$2');
    valor = valor.replace(/(\d{4})(\d)/, '$1-$2');
  }

  input.value = valor;
}

Neste código, a função aplicarMascara() é chamada toda vez que um caractere é inserido ou removido no campo de input. A função primeiro remove todos os caracteres não numéricos para que seja possível determinar a quantidade de dígitos restantes.

Se o número de dígitos for menor ou igual a 11, a máscara de CPF é aplicada. Caso contrário, a máscara de CNPJ é aplicada.

Lembre-se de adicionar esse script no final do corpo (</body>) ou dentro de uma tag <script> após o elemento do input para garantir que o DOM seja carregado antes de vincular os eventos.

Agora, o campo de input terá a máscara de CPF ou CNPJ automaticamente, dependendo da quantidade de dígitos inseridos.