Masccara de CPF e telefone | Alura - Cursos online de tecnologia

Em programação, criar uma máscara para CPF e telefone em um componente de input pode ser feito utilizando JavaScript para manipular os eventos do teclado e formatar o valor conforme necessário. Abaixo estão exemplos simples de como você pode implementar isso.

Máscara para CPF:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CPF Mask</title>
</head>
<body>

  <label for="cpf">CPF:</label>
  <input type="text" id="cpf" maxlength="14">

  <script>
    document.getElementById('cpf').addEventListener('input', function (event) {
      let inputValue = event.target.value.replace(/\D/g, ''); // Remove caracteres não numéricos
      inputValue = inputValue.substring(0, 11); // Limita a 11 caracteres (9 dígitos + 2 pontos)

      if (inputValue.length > 9) {
        inputValue = inputValue.replace(/(\d{3})(\d{3})(\d{3})/, '$1.$2.$3-');
      } else if (inputValue.length > 6) {
        inputValue = inputValue.replace(/(\d{3})(\d{3})/, '$1.$2.');
      } else if (inputValue.length > 3) {
        inputValue = inputValue.replace(/(\d{3})/, '$1.');
      }

      event.target.value = inputValue;
    });
  </script>

</body>
</html>

Máscara para Telefone:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Phone Number Mask</title>
</head>
<body>

  <label for="phone">Telefone:</label>
  <input type="text" id="phone" maxlength="14">

  <script>
    document.getElementById('phone').addEventListener('input', function (event) {
      let inputValue = event.target.value.replace(/\D/g, ''); // Remove caracteres não numéricos
      inputValue = inputValue.substring(0, 11); // Limita a 11 caracteres (9 dígitos + 2 pontos)

      if (inputValue.length > 10) {
        inputValue = inputValue.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
      } else if (inputValue.length > 6) {
        inputValue = inputValue.replace(/(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3');
      } else if (inputValue.length > 2) {
        inputValue = inputValue.replace(/(\d{2})(\d{0,5})/, '($1) $2');
      }

      event.target.value = inputValue;
    });
  </script>

</body>
</html>

Esses exemplos usam o método addEventListener para capturar o evento de input no campo de entrada e aplicam a formatação conforme o usuário digita. A função replace é usada para adicionar os caracteres de pontuação nos lugares apropriados.