Preciso fazer uma mascara para CPF e Telefone dentro o componente input, quero saber como fazer na mão, sem instalar biblioteca, como se faz?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Preciso fazer uma mascara para CPF e Telefone dentro o componente input, quero saber como fazer na mão, sem instalar biblioteca, como se faz?
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.
<!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>
<!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.
Caso tenha conseguido esclarecer suas dúvidas, fico feliz em ter ajudado. Estou à disposição para qualquer outra questão que possa surgir. Um abraço! Se este post foi útil, por favor, marque como solucionado ✓. Desejo a você excelentes estudos!