Mascara CPF e Telefone[resolvido]

jairodione · Julho 2, 2011, 7:17pm

Olá Pessoal!

Estou desenvolvendo um sistema em JSF, tem um formulário de cadastro de clientes e nele gostaria de colocar as mascaras para CPF e Telefone. No campo CPF a mascara deve ser “111.111.111-11” e no telefone deve ser "(86)3333-3333.
Abaixo esta o codigo do formulário:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="htm"  uri="http://jsftutorials.net/htmLib"%>
<%@ taglib prefix="tr"  uri="http://myfaces.apache.org/trinidad"%>
<%@ taglib prefix="trh"  uri="http://myfaces.apache.org/trinidad/html"%>
<%@ taglib prefix="t"  uri="http://myfaces.apache.org/tomahawk"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jstl/core"%>
<!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=ISO-8859-1">
<title>Cadastro de Clientes</title>
<link rel="stylesheet" href="css/principal.css" type="text/css" />
</head>
<body>
	<f:view>
	<htm:div id="mensagens" rendered="#{not empty facesContext.maximumSeverity}">
		<h:panelGrid id="painelMensagens" columns="2">
		<h:graphicImage value="images/delete-comment-red.gif" title="Erro"></h:graphicImage>
		<h:messages></h:messages>
		</h:panelGrid>
	</htm:div><!-- mensagens -->
		<htm:div id="divPrincipal" styleClass="corpoPrincipal">
			<h1>S&S Serviços e Estoque Cliente</h1>
			<htm:ul>
				<htm:li>
					<h:form><h:commandButton styleClass="botaoSair" value="Sair" action="#{loginBean.sair}"></h:commandButton></h:form>
				</htm:li>
			</htm:ul>	
			<htm:div id="divcorpoEsquerda" styleClass="corpoEsquerda">
				<htm:fieldset style="borda">
					<htm:legend style="legenda">Clientes:</htm:legend>
					<h:form id="formCliente">
						<tr:subform>
							<h:panelGrid columns="2" styleClass="panelGrid" columnClasses="colunaDireita, colunaEsquerda">
								<h:outputText value="Cliente->" styleClass="labelInput"></h:outputText>
								<h:selectOneMenu id="selectCliente" value="#{clienteBean.codigoCliente}"
								disabled="#{not empty clienteBean.cnf.cliente}" required="true" requiredMessage="Selecione um Cliente!">
									<f:selectItems value="#{clienteBBean.clientes}"/>
								</h:selectOneMenu>
								<h:panelGroup></h:panelGroup>
								<h:panelGroup>
									<h:commandButton id="confirmarCliente" value="Confirmar" action="#{clienteBean.confirmarCliente}" styleClass="panelBotaoConfirmar">
									</h:commandButton>	
									<h:commandButton id="alterarCliente" value="Novo/Alterar" actionListener="#{clienteBean.alterarCliente}" styleClass="panelBotaoEditar">
									</h:commandButton>
								</h:panelGroup><!-- confirmar/alterar -->
							</h:panelGrid><!-- panelGrid cabeçalho -->
						</tr:subform>
						<h:panelGrid columns="1" styleClass="panelGrid" rendered="#{empty clienteBean.cnf.cliente}">
							<h:panelGrid columns="2" width="100%" columnClasses="colunaDireita, colunaEsquerda">
								<h:outputText value="Nome:" styleClass="labelInput"></h:outputText>
								<h:inputText id="inputNomeCliente" value="#{clienteBBean.cliente.nome}"
								converter="stringNull" ></h:inputText>
								<h:outputText value="CPF:" styleClass="labelInput"></h:outputText>
								<h:inputText id="inputCpfCliente" value="#{clienteBBean.cliente.cpf}"
								converter="stringNull" ></h:inputText>
								<h:outputText value="CNPJ:" styleClass="labelInput"></h:outputText>
								<h:inputText id="inputCnpjCliente" value="#{clienteBBean.cliente.cnpj}"
								converter="stringNull" ></h:inputText>
							</h:panelGrid><!-- panelGrid consultacoluna -->
							<h:commandButton id="consultarCliente" value="Consultar" styleClass="panelBotaoConsultar"></h:commandButton>
						</h:panelGrid><!-- panelGrid consulta -->
					</h:form><!-- formCliente -->		
				</htm:fieldset><!-- fieldset borda -->
			</htm:div><!-- divcorpoEsquerda -->
			<htm:div id="divcorpoDireita" styleClass="corpoDireita">
				<htm:div id="previewCliente" styleClass="previewNotaFiscal" rendered="#{not empty clienteBean.cnf.cliente}">
					<t:div id="nrNF">
						<h:outputText styleClass="inputNrNF" value="Dados do Cliente:" />
						<htm:small style="font-size:10px;"></htm:small>
					</t:div><!-- nrNF -->
						<h:form id="dadosCliente">
							<htm:div id="dadosCliente">
								<htm:p>Codigo:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.codigo}" /></htm:big>
								<htm:p>Nome/Razão Social:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.nome}" /></htm:big>
								<htm:p>Endereço:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.endereco}" /></htm:big>
								<htm:p>Complemento:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.complemento}" /></htm:big>
								<htm:p>Bairro:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.bairro}" /></htm:big>
								<htm:p>Cidade:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.cidade}" /></htm:big>
								<htm:p>Uf:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.uf}" /></htm:big>
								<htm:p>Cep:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.cep}" /></htm:big>
								<htm:p>Data de Nascimento:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.datanasc}" /></htm:big>
								<htm:p>Cliente Desde:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.desde}" /></htm:big>
								<htm:p>Rg:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.rg}" /></htm:big>
								<htm:p>CPF:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.cpf}" /></htm:big>
								<htm:p>CNPJ:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.cnpj}" /></htm:big>
								<htm:p>Inscrição Estadual:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.insest}" /></htm:big>
								<htm:p>Fone Residencial:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.foneres}" /></htm:big>
								<htm:p>Fone Comercial:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.fonecom}" /></htm:big>
								<htm:p>Fax:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.fax}" /></htm:big>
								<htm:p>Celular:</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.celular}" /></htm:big>
								<htm:p>Contato</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.contato}" /></htm:big>
								<htm:p>Observações</htm:p><htm:big><h:outputText value="#{clienteBean.cnf.cliente.observacao}" /></htm:big>
							</htm:div><!-- dadosCliente -->
							<h:commandButton id="alterarExcluirCliente" value="Excluir/Alterar" styleClass="panelBotaoEditar"
							action="#{clienteBean.alteraExcluiCliente}"
							onclick="return confirm('Deseja relamente alterar ou excluir o Cliente?');">
									</h:commandButton>
						</h:form><!-- dadosClientes -->	
				</htm:div><!-- previewCliente -->
			</htm:div><!-- divcorpoDireita -->
			<htm:div id="divcadcorpoDireita" styleClass="corpoDireita">
				<htm:div id="previewCadCliente" styleClass="previewNotaFiscal" rendered="#{empty clienteBean.cnf.cliente}">
					<t:div id="cadnrNF">
						<h:outputText styleClass="cabecalho" value="Cadastrar Cliente"/>
						<htm:small style="font-size:10px;"></htm:small>
					</t:div><!-- cadnrNF -->
						<h:form id="dadosCadCliente">
							<htm:div id="dadosCadCliente">
								<htm:p>Codigo:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.codigo}" disabled="true" /></htm:big>
								<htm:p>Nome/Razão Social:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.nome}" /></htm:big>
								<htm:p>Endereço:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.endereco}" /></htm:big>
								<htm:p>Complemento:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.complemento}" /></htm:big>
								<htm:p>Bairro:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.bairro}" /></htm:big>
								<htm:p>Cidade:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.cidade}" /></htm:big>
								<htm:p>Uf:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.uf}" /></htm:big>
								<htm:p>Cep:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.cep}" /></htm:big>
								<t:div id="calendario" forceId="true">
									<htm:p>
										<h:outputText value="Data de Nascimento:" />
										<t:inputCalendar value="#{clienteBean.cliente.datanasc}" renderAsPopup="true"
										renderPopupButtonAsImage="true" popupButtonImageUrl="images/search-blue.gif">
										</t:inputCalendar>
									</htm:p>
									<htm:p>
										<h:outputText value="Cliente Desde:" />
										<t:inputCalendar value="#{clienteBean.cliente.desde}" renderAsPopup="true"
										renderPopupButtonAsImage="true" popupButtonImageUrl="images/search-blue.gif">
										</t:inputCalendar>
									</htm:p>
								</t:div><!-- calendario -->
								<htm:p>Rg:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.rg}" /></htm:big>
								<htm:p>CPF:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.cpf}" /></htm:big>
								<htm:p>CNPJ:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.cnpj}" /></htm:big>
								<htm:p>Inscrição Estadual:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.insest}" /></htm:big>
								<htm:p>Fone Residencial:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.foneres}" /></htm:big>
								<htm:p>Fone Comercial:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.fonecom}" /></htm:big>
								<htm:p>Fax:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.fax}" /></htm:big>
								<htm:p>Celular:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.celular}" /></htm:big>
								<htm:p>Contato</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.contato}" /></htm:big>
								<htm:p>Observações</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.observacao}" /></htm:big>
							</htm:div><!-- dadosCadCliente -->
							<h:commandButton styleClass="panelBotaoConfirmar" value="Incluir Cliente"
							action="#{clienteBean.incluirCliente}"
							onclick="return confirm('Confirma a inclusão do Cliente?');">
							</h:commandButton>
						</h:form><!-- dadosCadClientes -->	
				</htm:div><!-- previewCadCliente -->
			</htm:div><!-- divcadcorpoDireita -->
		</htm:div><!-- divPrincipal -->	
	</f:view>
</body>
</html>

Gostaria de colocar as mascaras nestes campos:

htm:pCPF:</htm:p>htm:big<h:inputText value="#{clienteBean.cliente.cpf}" /></htm:big>
htm:pFone Residencial:</htm:p>htm:big<h:inputText value="#{clienteBean.cliente.foneres}" /></htm:big>

Rodrigo_Sasaki · Julho 2, 2011, 7:32pm

Não sei exatamente qual o seu problema nesse caso… mas você pode usar JavaScript pra fazer isso.

Agora se ja tentou algumas coisas e está tendo problemas, fale pra gente que a gente te ajuda

Luciano_Lopes · Julho 2, 2011, 7:38pm

Tem um componente jquery que faz essas mascaras,da uma pesquisa no google que você acha facil,procura por mascaras+jquery

jairodione · Julho 2, 2011, 8:03pm

Estou utilizando eclipse. Não estou sabendo colocar as mascaras nos campos de CPF e Telefone!

surfzera · Julho 2, 2011, 11:33pm

Tenta usar o easyfaces projeto brasileiro e facil de usar.

jairodione · Julho 3, 2011, 11:40am

Olá Pessoal!

Fiz uma pesquisa no google “jsf+mascara+eclipse” e achei uma biblioteca que alem de colocar a mascara ele valida o campo de CPF informando se o digito verificador está correto. Veja como ficou:

<%@ taglib prefix="stella"  uri="http://stella.caelum.com.br/faces"%>//esta é a biblioteca
//os campos de inputText ficarão assim
<htm:p>CPF:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.cpf}">
	   <stella:validateCPF formatted="true"/>
                   </h:inputText></htm:big>
<htm:p>CNPJ:</htm:p><htm:big><h:inputText value="#{clienteBean.cliente.cnpj}">
			   <stella:validateCNPJ formatted="true" />
                                                   </h:inputText></htm:big>

system · Dezembro 30, 2015, 8:14am

Mascara CPF e Telefone[resolvido]

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI