Criando uma máscara para um input tratando número de telefone, com DDD e que se ajuste entre 8 ou 9 dígitos se for o caso de celular. – Blog – Devdata Sistemas

Você pode criar uma máscara para um input de telefone usando linguagens como JavaScript, utilizando expressões regulares para validar e formatar os números conforme necessário. Aqui está um exemplo básico de como você pode fazer isso:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masked Phone Input</title>
</head>
<body>
<label for="phone">Telefone:</label>
<input type="text" id="phone" name="phone" placeholder="(XX) XXXX-XXXX">

<script>
document.getElementById('phone').addEventListener('input', function (e) {
    var phone = e.target.value.replace(/\D/g, ''); // Remove todos os caracteres não numéricos
    var formattedPhone;

    // Verifica se é um celular (9 dígitos) ou um telefone fixo (8 dígitos)
    if (phone.length === 11) {
        formattedPhone = phone.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3'); // Formato para celular
    } else if (phone.length === 10) {
        formattedPhone = phone.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3'); // Formato para telefone fixo
    } else {
        formattedPhone = phone; // Mantém o número como está se não for válido
    }

    e.target.value = formattedPhone;
});
</script>
</body>
</html>

Neste exemplo, a máscara se ajusta dependendo do número de dígitos digitados. Se forem 11 dígitos, assume-se que é um número de celular, caso contrário, um telefone fixo. A máscara está configurada para o formato comum brasileiro “(XX) XXXX-XXXX”. Você pode ajustar a máscara conforme necessário.

Ainda, você pode definir um atributo minlength no input para especificar a quantidade mínima de caracteres que deseja para o número de telefone, forçando assim a inclusão do DDD. Aqui está a versão atualizada do código:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masked Phone Input</title>
</head>
<body>
<label for="phone">Telefone:</label>
<input type="text" id="phone" name="phone" placeholder="(XX) XXXX-XXXX" minlength="14">

<script>
document.getElementById('phone').addEventListener('input', function (e) {
    var phone = e.target.value.replace(/\D/g, ''); // Remove todos os caracteres não numéricos
    var formattedPhone;

    // Verifica se é um celular (9 dígitos) ou um telefone fixo (8 dígitos)
    if (phone.length === 11) {
        formattedPhone = phone.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3'); // Formato para celular
    } else if (phone.length === 10) {
        formattedPhone = phone.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3'); // Formato para telefone fixo
    } else {
        formattedPhone = phone; // Mantém o número como está se não for válido
    }

    e.target.value = formattedPhone;
});
</script>
</body>
</html>

Nesta versão, o atributo minlength está definido como 14, forçando o usuário a digitar pelo menos 14 caracteres, incluindo o código de área (DDD), antes que o campo seja considerado válido.

Related Posts