JSF – Máscaras com JQuery

Neste post irei ensinar como usar máscaras em aplicações que utilizam a biblioteca de componentes RichFaces.

Pra facilitar a vida do desenvolvedor a JBoss incluiu o JQuery no RichFaces simplificando assim a manipulação de máscaras em aplicações JSF.

Versões utilizadas

  • Eclipse 3.4.1
  • JDK 1.6
  • Tomcat 6.0.18
  • MyFaces 1.2.5
  • RichFaces 3.3.1

Requisitos

  1. O RichFaces deve estar instalado na aplicação; Clique aqui para aprender a instalar o RichFaces
  2. O arquivo jquery.maskedinput-1.2.1.js deve estar presente na aplicação. Baixe aqui o arquivo

Utilizando

  • Crie uma pasta com o nome de resources dentro da pasta WebContent;
  • Coloque o arquivo jquery.maskedinput-1.2.1.js dentro da pastas resources:

jquery

  • Crie um novo arquivo jsp dentro da pasta WebContent/pages com o nome de pagina.jsp e cole o seguinte código no arquivo criado:
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
    <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
    <%@ taglib prefix="rich" uri="http://richfaces.ajax4jsf.org/rich"%>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Máscaras com JQuery</title>
    
        <script type="text/javascript" src="/jsf/resources/jquery.maskedinput-1.2.1.js"></script>
    
    </head>
    <body>
    <f:view>
     <fieldset>
     <legend>Máscaras com JQuery</legend>
     <h:panelGrid columns="2">
    
         <h:outputLabel for="nome" value="Nome: "  />
         <h:inputText id="nome" value="" size="50" />
    
         <h:outputLabel for="cpf" value="CPF: "  />
         <h:inputText id="cpf" value="" size="11">
             <rich:jQuery selector="#cpf" query="mask('999.999.999-99')" timing="onload"/>
         </h:inputText>
    
         <h:outputLabel for="dataNascimento" value="Data Nascimento: "  />
         <h:inputText id="dataNascimento" value="" size="7">
             <rich:jQuery selector="#dataNascimento" query="mask('99/99/9999')" timing="onload"/>
         </h:inputText>
    
         <h:outputLabel for="cep" value="CEP: "  />
         <h:inputText id="cep" value="" size="7">
             <rich:jQuery selector="#cep" query="mask('99999-999')" timing="onload"/>
         </h:inputText>
    
         <h:outputLabel for="telefone" value="Tel. Residencial "  />
         <h:inputText id="telefone" value="" size="11">
             <rich:jQuery selector="#telefone" query="mask('(99) 9999-9999')" timing="onload"/>
         </h:inputText>
    
     </h:panelGrid>
    
     </fieldset>
    
    </f:view>
    </body>
    </html>

Considerações

A diretiva <%@ taglib prefix=”rich” uri=”http://richfaces.ajax4jsf.org/rich”%&gt; deve ser adicionada no código para que os componentes RichFaces possam ser utilizados na aplicação.

A linha <script type=”text/javascript” src=”/jsf/resources/jquery.maskedinput-1.2.1.js”></script> deve estar dentro da tag head para que o arquivo seja carregado.

Utilizando o componente <rich:jQuery>

  • O atributo selector deve ter o mesmo id do componente que receberá a máscara acrescentado de um #. Por exemplo:
<h:inputText id="cpf" value="" size="11">
    <rich:jQuery selector="#cpf" query="mask('999.999.999-99')" timing="onload"/>
</h:inputText>
  • A máscara pode ser personalizada conforme a sua necessidade. Neste exemplo peguei o CPF, mas poderia ter sido outro qualquer.

Download do projeto

Baixe o projeto completo aqui.

Até o próximo post!


8 Comentários on “JSF – Máscaras com JQuery”

  1. Felipe Arimatéia disse:

    Sergio os meus formulários são dentro de um modelPanel e a máscara do CPF não quis funcionar
    pode ser porque uso modelPanel

  2. Tiago Augusto disse:

    Você já tentou fazer um rerender com esses componentes? Após um rerender parece que o tamanho máximo do campo é alterado para 0, não sendo mais possível digitar mais nada.

  3. Berilo disse:

    Parabens, bem detalhado .
    Me quebrou um galhão valeu …

  4. Fla disse:

    Tem como fazer máscara para hora?

  5. abcdinosaur disse:

    É possível criar uma máscara de primeiro dígito opcional ? Sem usar o ?

    exemplo:

    No caso : (1 este opcional) 11:11

  6. cassionandi disse:

    O problema é aplicar isso no rich:calendar, só consegui através do uso de uma classe css no seletor, “.rich-calendar-input”, nesse caso, como a classe é usada em todos os rich:calendar, só é necessário adicionar o rich:jquery uma vez no formulário que os outros já pegarão a mask.

  7. César Santiago disse:

    Sergio, na minha tela tem 2 campos com mascara cnpj e cpf, não consigo visualizar as duas mascaras, somente a primeira cnpj. Fiz um teste deixando a primeira como comentário(cnpj) então vejo a mascara do cpf. Vc poderia me ajudar

  8. kleber disse:

    Boa noite Sérgio, mais uma vez, parabéns pelo artigo.

    Mas tenho uma dúvida: quando precisamos utilizar uma requisição via ajax (a4j:support) junto ao rich:jquery, o a4j não é executado e o rich:jquery não funciona corretamente.
    O que se pode fazer?


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s