Máscara de telefone em javascript

Air-Gear · 16 de abril de 2012

Olá pessoal!

Bem, é o seguinte, eu estou tentando colocar uma máscara de telefone em javascript em um formulário em html. Eu quero que aceita somente números ao digitar e o "(", ")" e "-" são digitados automaticamente. Eu usei esse código, mas não funciona direito.

MascaraTelefone.js

function mascara(o,f){
    v_obj=ov_fun=fsetTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function leech(v){
    v=v.replace(/o/gi,"0")
    v=v.replace(/i/gi,"1")
    v=v.replace(/z/gi,"2")
    v=v.replace(/e/gi,"3")
    v=v.replace(/a/gi,"4")
    v=v.replace(/s/gi,"5")
    v=v.replace(/t/gi,"7")
    v=v.replace(/t/gi,"8")
    v=v.replace(/t/gi,"9")   
    return v
}function soNumeros(v){
    return v.replace(/\D/g,"")
}
function telefone(v){
        v=v.replace(/\D/g,"") //Remove tudo o que não é dígito
        v=v.replace(/^(\d\d)(\d)/g,"($1) $2") //Coloca parênteses em volta dos dois primeiros dígitos
        v=v.replace(/(\d{4})(\d)/,"$1-$2") //Coloca hífen entre o quarto e o quintodígitos
        return v
}

Só que não funcionou. No máximo imprimiu um "(". Tentei achar outras máscaras, mas achei só uma que funcionava só que avisava que o telefone era inválido.

Alguém pod eme ajudar?

DiF · 16 de abril de 2012

procure o plugin jQuery masked Input.

serve para varios tipos mascaras... como telefone, cpf, moeda.. enfim.. é melhor do que pena usando esses js puro

Air-Gear · 16 de abril de 2012

Eu achei deste site: http://www.tidbits.com.br/plugin-de-mascara-para-jquery-masked-input

Eu copiei o código para um arquivo javascript e coloquei no tag do formulario pra receber a máscara, mas ainda não funciona. Não sei se estou errando em alguma coisa e não estou percebendo.

O formulário é esse:

form_contato.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cadastrar Contato</title>
<link href="estilo_tela.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script language="JavaScript" type="text/javascript" src="MascaraTelefone2.js"></script> 
</head>

<body>
<div id="stylized" class="myform">    
<form id="form1" name="form1" method="post" action="salvar_contato.php">

<h1>Cadastrar Contato</h1>
<p>Nesta tela faz o cadastro de contatos</p>

<label>NOME
<span class="small">Escreva seu nome</span>
</label>
<input type="text" name="nome" id="nome" />


<label>E-MAIL
<span class="small">Escreva seu e-mail</span>
</label>
<input type="text" name="email" id="email" />

<label>TELEFONE
<span class="small">Escreva seu telefone</span>
</label>
<input type="text" name="telefone" id="telefone" />

<label>ENDEREÇO
<span class="small">Escreva o seu endereço</span>
</label>
<input type="text" name="endereco" id="endereco" />

<label>BAIRRO
<span class="small">Escreva o seu bairro</span>
</label>
<input type="text" name="bairro" id="bairro" />

<label>CIDADE
<span class="small">Escreva a sua cidade</span>
</label>
<input type="text" name="cidade" id="cidade" />

<label>ESTADO
<span class="small">Escreva o seu estado</span>
</label>
<input type="text" name="estado" id="estado" />

<button type="submit">Cadastrar</button>
<div class="spacer"></div>
</form>
</div>

</body>
</html>

E da máscara é esse:

MascaraTelefone2.js


	$(document).ready(function(){
		$("#telefone").mask("9999-9999");
		$("#cpf").mask("999.999.999-99");
		$("#cep").mask("99999-999");
		$("#data").mask("99/99/9999");
	});

EDIT: Já vi que esqueci de colocar o jquery.maskedinput-1.1.4.pack.js. Já fiz o dowload do outro e passaei o código do MascaraTelefone2.js para dentro da head do form_contato.html. Mesmo assim ainda não funciona.

Edit2: Resolvi o problema. Eu estava chamando o jquery-1.2.6.pack.js e o jquery.maskedinput-1.1.4.pack.js na pasta errada. E também precisei coloca rum form dentro da tag label do telefone.

Tipo isso:

<label for="telefone">TELEFONE
<span class="small">Escreva seu telefone</span>
</label>

Mesmo assim, valeu pela ajuda Dif

DiF · 16 de abril de 2012

você pode fazer a mascara assim:

$("#phone").mask("(99) 999-9999");

que funciona bem.

sim, sempre que usar plugins em jQuery, você precisa chamar os plugins dentro de seu head. o plugin do jQuery mais recente e o plugin que esta tentando usar.

outra coisa que me chamou a atençao:

nao precisas fazer redundancia de declaraçao ali:

troque para: