Muitas pessoas podem ter problemas ao tentar criar uma máscara com Jquery, bom felizmente existe um plugin muito bom e prático para fazer este tipo de tarefa. o
jQuery Mask
bastando para isso fazer isso aqui:
$("#telefone").mask("(99)9999-9999");
Fazendo isso já temos uma mascara do tipo telefone, que só recebe números de 1 a 9 e deve obedecer a esta regra que criamos, quando o usuário clicar no campo ficará assim:
( )____-____
Nosso tutorial não se resume a isso, eu quero fazer um algo a mais aqui, bom, alguns estados agora tem o 9º digito, então para este tipo de telefone teremos que ter esta outra máscara:
$("#telefone").mask("(99)99999-9999");
Agora veio um pequeno problema, pois se o usuário digitar o telefone sem o nono digito, automaticamente o jquery vai apagar o campo, portanto vamos ver uma pequena solução para este problema, quero lhe apresentar o evento .focusout() do jquery, ele é acionado assim que um campo perde o foco, neste caso usaremos para aramzenar a informação digitada pelo usuário e joga-la novamente nos seu devido lugar, depois você pode fazer uma verificação no jquery ou php para ver se o usuario digitou o telefone corretamente.
bom vamos primeiramente pegar o que foi digitado pelo usuário e jogar em uma variavel:
$("#telefone").keyup(function() {
var tel = $(this).val();
Agora com o evento focusout vamos jogar novamente o que foi digitado pelo usuário
$(this).focusout(function() {
$("#telefone").val(tel);
Se você entende de Jquery sabe muito bem como tudo isso aqui funciona, até já sabe implementar isso em suas aplicações, mas vou deixar aqui o código completo e logo abaixo você pode baixar este exemplo completo para estudo ou implementação em suas aplicações:
<!DOCTYPE html>
<html lang="pt_br">
<head>
<title> exemplo jquery </title>
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#telefone").mask("(99)99999-9999");
$("#telefone").keyup(function() {
var tel = $(this).val();
$(this).focusout(function() {
$("#telefone").val(tel);
});
});
});
</script>
</head>
<body>
<form>
<p> Nome <input id="nome" type="text" name="nome"> </p>
<p> Email <input id="email" type="email" name="email"> </p>
<p> Telefone <input id="telefone" type="text" name="telefone"> </p>
<p> Mensagem </p>
<p> <textarea name="msg" cols="20" rows="10"></textarea> </p>
<p> <input type="button" id="botao" name="enviar" value="Enviar"> </p>
</form>
</body>
</html>
Clique aqui para baixar o arquivo completo
Comentários
Postar um comentário