Olá Pessoal,
Neste post, irei mostrar um exemplo, de como criar máscaras em formulários JSF, para isto, iremos usar a biblioteca JQuery que facilita o desenvolvimento de scripts em páginas web, além desta biblioteca, usaremos uma outra, chamada de MaskedInput.
A biblioteca JQuery, pode ser baixada no site http://jquery.com/ e a MaskedInput pode ser baixada no site http://plugins.jquery.com/project/maskedinput.
Através da MaskedInput, conseguimos criar vários tipos de máscaras facilmente, sem a necessidade de conhecermos a fundo JavaScript.
Para este exemplo, mostrarei cinco tipos de máscaras (Telefone, Cep, CPF, RG e CNPJ), usando o JSF. Estas máscaras não restringe apenas para uso no JSF, também poderá ser usado em JSP, Struts, etc...
Ao final do post, o projeto será disponibilizado para download, para quem quiser baixar e testar.
1. Passo: Crie um página de formulário em JSF, como mostrado na figura abaixo, não esquece de importar os scripts:
2. Passo: Agora, só testar, vejam como ficou o exemplo:
Bom galera, este foi um exemplo de como usar máscaras em formulários JSF, através da biblioteca JQuery e MaskedInput.
Para quem quiser baixar o projeto, clique aqui.
Qualquer dúvida, crítica ou sugestão, fico à disposição.
14 comentários:
Essa porra não funciona não
fraude.
Meu caro amigo,
O projeto foi testado usando JSF padrão e funcionou normalmente.
Você tentou debugar com Firebug para ver a descrição do possível erro.
Qualquer dúvida, fico à disposição.
Esse projeto realmente nao funciona!!
¬¬
Testei o projeto novamente no Netbeans 6.8 e rodou perfeitamente. O projeto que está sendo disponibilizado para download está sem as bibliotecas do JSF, para poder rodar o mesmo é necessário adicionar estas bibliotecas.
Olha só, fiz o mesmo código, porém, quando coloco as tags dentro de um (...código aki...) a máscara deixa de funcionar. Mas, quando comento a tag funciona normalmente. Saberia explicar isso e como funcionar corretamente?
Me lembre qdo responder ok? (douglas.goncaze@gmail.com)
A tag referida acima é a h:form!
Caro Douglas,
Para resolver este problema é simples, veja o exemplo:
No jQuery: $(".fone").mask("(99) 9999-9999");
Na tag Input, use o atributo: styleClass="fone"
Simplesmente, ao invés de usar o id(#), usa a class(.).
Ok, valeu! (Douglas)
Fala Jabes!
O homem tem até blog...
Sou eu o Cesar lembra de mim?
E o Geraldo continua pegando muito Traveco?
Abs
Cesar
Fala César, td blz!?
O Geraldo, até onde eu sei, está trabalhando aí no Rio.
Não funciona.
Opa pessoal se alguem conseguiu implementar por favor me envie no e-mail dom.ricky@hotmail.com muito obrigado
Vlw amigo, o codigo funciona que é uma beleza, quebrou meu galho aki. (y)
Cara, não funcionou :( , fiz conforme seu post mas o jsf não reconhece
Postar um comentário