Códigos

Máscara de telefone de 9 dígitos com DDD em JavaScript

Ernando de Castro 19 de fevereiro de 2013

Neste pequeno script, mostrarei como criar uma máscara para telefones com 9 dígitos e DDD como o que foi implantado em São Paulo e estará em breve no restante do país.

Para validação é utilizada algumas expressões regulares.

<html>
<head>
    <title>Mascara Telefone</title>
<script type="text/javascript">
/* Máscaras ER */
function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function mtel(v){
    v=v.replace(/D/g,"");             //Remove tudo o que não é dígito
    v=v.replace(/^(d{2})(d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(d)(d{4})$/,"$1-$2");    //Coloca hífen entre o quarto e o quinto dígitos
    return v;
}
function id( el ){
	return document.getElementById( el );
}
window.onload = function(){
	id('telefone').onkeypress = function(){
		mascara( this, mtel );
	}
}
</script>

</head>
<body>

    <input type="text" name="telefone" id="telefone" maxlength="15" />

</body>
</html>

<html>

<head>

<title>Mascara Telefone</title>

/* Máscaras ER */

function mascara(o,f){

v_obj=o

v_fun=f

setTimeout("execmascara()",1)

}

function execmascara(){

v_obj.value=v_fun(v_obj.value)

}

function mtel(v){

v=v.replace(/D/g,""); //Remove tudo o que não é dígito

v=v.replace(/^(d{2})(d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos

v=v.replace(/(d)(d{4})$/,"$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos

return v;

}

function id( el ){

return document.getElementById( el );

}

window.onload = function(){

id('telefone').onkeypress = function(){

mascara( this, mtel );

}

</script>

</head>

<body>

</body>

</html>

Ernando de Castro

Autor

Na universidades federal de viçosa. Estudante em analise desenvolvimento de sistema na OPET curitiba

Ver todas as publicações de Ernando de Castro

Você pode se interessar

Artigos

7 visualizações

Artigos

7 visualizações

Manifesto Ágil: Retrospectivas Lúdicas

Plataformatec - 14 de janeiro de 2019

Há alguns anos, quando tive os meus primeiros contatos práticos com os métodos ágeis, conheci e participei pela primeira vez (como ouvinte) de um famoso evento do universo ágil: Retrospectivas. Após duas horas de reunião, entendi (equivocadamente, por sinal) que essa reunião tinha dois grandes objetivos: escutar as pessoas elogiando algumas características da última entrega do […]

Vídeos

1,655 compartilhamentos6,805 visualizações

Vídeos

1,655 compartilhamentos6,805 visualizações

Agile // Dicionário do Programador

Thais Cardoso de Mello - 14 de janeiro de 2019

Agile é o termo falado nesse Dicionário do Programador, conheça mais sobre o assunto.

Promoções de Jogos do Final de Semana (11/01)

Notícias

16 visualizações

Notícias

16 visualizações

Promoções de Jogos do Final de Semana (11/01)

Carlos L. A. da Silva - 11 de janeiro de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

10 Responses

[email protected] 2013-09-02 at 15:50

A seguir. Somente números + DDD + tel 8 “OU” 9 dígitos + tratamento para “ç e Ç”

By: †‡Falcão‡†

js: Assinatura(NomeCampo)

function telefone(a) { $(a).keyup(function (f) { if ((f.keyCode > 64 && f.keyCode < 91) || f.keyCode == 186) { var d = (String.fromCharCode(f.keyCode)).toUpperCase(); var c = (a.value.charAt(a.value.length – 1)).toUpperCase(); if (d == c || c == "Ç" || c == "ç") { a.value = a.value.substring(0, (a.value.length – 1)) } } }); separador = "("; separador1 = ")"; separador2 = "-"; conjunto1 = 0; conjunto2 = 3; conjunto3 = 8; if (a.value.length 13) { a.value = a.value.replace(“-“, “”); a.value = a.value.substring(0, 9) + separador2 + a.value.substr(9, 4) } } } };

Resposta
Jackson 2014-02-06 at 1:17

Olá Pessoal! testei este código o mesmo não deu certo, não funcionava a mascara de jeito nenhum.
Este código abaixo foi o que estou usando, esta funcionando blz serve tbm para os 9 digitos.

Mascara Telefone

/* Máscaras ER */
function mascara(o,f){
v_obj=o
v_fun=f
setTimeout(“execmascara()”,1)
}
function execmascara(){
v_obj.value=v_fun(v_obj.value)
}
function mtel(v){
v=v.replace(/\D/g,””); //Remove tudo o que não é dígito
v=v.replace(/^(\d{2})(\d)/g,”($1) $2″); //Coloca parênteses em volta dos dois primeiros dígitos
v=v.replace(/(\d)(\d{4})$/,”$1-$2″); //Coloca hífen entre o quarto e o quinto dígitos
return v;
}
function id( el ){
return document.getElementById( el );
}
window.onload = function(){
id(‘telefone’).onkeyup = function(){
mascara( this, mtel );
}
}

Resposta
Jeovane Carvalho 2014-06-09 at 17:26

Ai pessoal este código postado realmente não funciona, mas eu dei Ctrl+U na página e copiei o código fonte do site em funcionamento e funcionou legal, este código postado esta com erro de formatação, faça isso pessoal…

Resposta
Eduardo Monteiro de Andrade 2014-09-24 at 16:41

Funcionou pra mim, o problema que eu tenho é o componente não tem todos os atributos que eu preciso, e ele não está funcionando no meu componente de que o nosso arquiteto criou, mas valeu pela força, já ajudou muito.

Resposta
Carlos Diniz 2014-10-09 at 23:10

/* Máscaras ER */
function mascara(o,f){
v_obj=o
v_fun=f
setTimeout(“execmascara()”,1)
}
function execmascara(){
v_obj.value=v_fun(v_obj.value)
}
function mtel(v){
v=v.replace(/D/g,””); //Remove tudo o que não é dígito
v=v.replace(/^(d{2})(d)/g,”($1) $2″); //Coloca parênteses em volta dos dois primeiros dígitos
v=v.replace(/(d)(d{4})$/,”$1-$2″); //Coloca hífen entre o quarto e o quinto dígitos
return v;
}
function id( el ){
return document.getElementById( el );
}
window.onload = function(){
id(‘telefone’).onkeypress = function(){
mascara( this, mtel );
}
}

Resposta
Carlos Diniz 2014-10-09 at 23:11

pode pegar esse funciona

Resposta
Márcio Simão 2014-11-06 at 17:12

Este plugin também é uma opção interessante: https://github.com/masimao/maskbrphone

Resposta
PastorLuis Antonio 2014-11-27 at 7:41

Olá, mas seu eu tiver 2 campos um para telefone e o outro para celular, os ids serão diferentes, como devo proceder nesse caso, porque desse jeito que está aí, um funciona o outro não.

Resposta
Allan 2018-03-03 at 10:46

Tem como atribuir ele a uma classe ao invés de uma id?

Resposta
Oliveira 2018-03-20 at 14:57

Valeu pela dica Jeovane Carvalho, ensinando usar Ctrl+U, Funcionou !

Resposta