Máscara para campos inputText em uma página jsf usando Jquery

Front-end
#1

Pessoal,

Eu estou tentando fazer a mascara de um campo inputText e não tá funcionando, porém se eu usar um arquivo html puro com input normal funciona, como nesse exemplo que peguei na net:
http://www.wmonline.com.br/desenvolvimento/javascript/mascara-em-campos-com-jquery
não estou utilizando richface, somente jsf, lembrando que o caminho pra os arquivos js estão corretos,
Agradeço desde já pela colaboração, veja meu código da minha página xhtml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">



<h:head>
	<title>Cadastro de usuario</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/maskedinput-1.1.2.pack.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$(function(){
		$.mask.addPlaceholder("~","[+-]");
		$("#telefone").mask("(99) 9999-9999");
		$("#form\\:telefone").mask("(99) 9999-9999"); 
		$("#cep").mask("99999-999");
		$("#data").mask("99/99/9999");
		$("#cpf").mask("999.999.999-99");
		$("#cnpj").mask("99.999.999/9999-99");
	});
});
</script>
</h:head>
<h:body>
	<h1>Cadastro de usuario</h1>
	<hr />
	<h:form>
		<h:messages errorStyle="color: red"/>
				
				<h:inputHidden id="codigo" for="codigo"   
	       value="#{pessoaBean.pessoa.codigo}"/>
		
		<h:panelGrid columns="2">

			<h:outputLabel value="Nome:" for="nome" />
			<h:inputText id="nome" Label="Nome" value="#{pessoaBean.pessoa.nome}"
				required="true" maxlength="30" requiredMessage="Favor informar o Nome." />

			<h:outputLabel value="Telefone:" for="telefone" />
			<h:inputText id="telefone" Label="Telefone" value="#{pessoaBean.pessoa.telefone}"
				required="true" maxlength="10" requiredMessage="Favor informar o Telefone." >			
			</h:inputText>

			<h:outputLabel value="Endereco:" for="endereco" />
			<h:inputText id="endereco" Label="Endereco" value="#{pessoaBean.pessoa.endereco}"
				required="true" size="50" maxlength="30" requiredMessage="Favor informar o Endereco." />
				
			<h:outputLabel value="Sexo:" for="sexo"/>
				<h:selectOneMenu id="sexo" value="#{pessoaBean.pessoa.sexo}" required="true" requiredMessage="Favor informar o Sexo.">
					<f:selectItem itemValue="" itemLabel="Selecione..."/>
					<f:selectItem itemValue="M" itemLabel="Masculino"/>
					<f:selectItem itemValue="F" itemLabel="Feminino"/>
				</h:selectOneMenu>

			<h:outputText />
				
		</h:panelGrid>
		<h:panelGrid columns="3">
			<h:commandButton action="#{pessoaBean.salvar}" rendered="#{empty pessoaBean.pessoa.codigo}"  value="Salvar" />
			<h:commandButton action="#{pessoaBean.alterar}" rendered="#{!empty pessoaBean.pessoa.codigo}" value="Alterar" />
			<h:commandButton action="#{pessoaBean.listarPessoa}" immediate="true"  value="Listar usuarios" />	
		</h:panelGrid>
		
	</h:form>
	<hr />

</h:body>

</html>
#2

carra somente com jsf voce vai precisar usar javaScript… aconselho voce dar uma olhada na biblioteca do primefaces muito boa e facil de usar … exemplo no site http://www.primefaces.org/showcase-labs/ui/inputMask.jsf

#3

[quote=george]Pessoal,

Eu estou tentando fazer a mascara de um campo inputText e não tá funcionando, porém se eu usar um arquivo html puro com input normal funciona, como nesse exemplo que peguei na net:
http://www.wmonline.com.br/desenvolvimento/javascript/mascara-em-campos-com-jquery
não estou utilizando richface, somente jsf, lembrando que o caminho pra os arquivos js estão corretos,
Agradeço desde já pela colaboração, veja meu código da minha página xhtml:

[code]
<?xml version=“1.0” encoding=“ISO-8859-1”?>
<html xmlns=“http://www.w3.org/1999/xhtml”
xmlns:ui=“http://java.sun.com/jsf/facelets”
xmlns:h=“http://java.sun.com/jsf/html”
xmlns:f=“http://java.sun.com/jsf/core”>

<h:head>
<title>Cadastro de usuario</title>
<script type=“text/javascript” src=“js/jquery-1.3.2.js”></script>
<script type=“text/javascript” src=“js/maskedinput-1.1.2.pack.js”></script>

<script type=“text/javascript”>
$(document).ready(function(){
$(function(){
$.mask.addPlaceholder("~","[±]");
$("#telefone").mask("(99) 9999-9999");
$("#form\:telefone").mask("(99) 9999-9999");
$("#cep").mask(“99999-999”);
$("#data").mask(“99/99/9999”);
$("#cpf").mask(“999.999.999-99”);
$("#cnpj").mask(“99.999.999/9999-99”);
});
});
</script>
</h:head>
<h:body>
<h1>Cadastro de usuario</h1>
<hr />
<h:form>
<h:messages errorStyle=“color: red”/>

			&lt;h:inputHidden id="codigo" for="codigo"   
       value="#{pessoaBean.pessoa.codigo}"/&gt;
	
	&lt;h:panelGrid columns="2"&gt;

		&lt;h:outputLabel value="Nome:" for="nome" /&gt;
		&lt;h:inputText id="nome" Label="Nome" value="#{pessoaBean.pessoa.nome}"
			required="true" maxlength="30" requiredMessage="Favor informar o Nome." /&gt;

		&lt;h:outputLabel value="Telefone:" for="telefone" /&gt;
		&lt;h:inputText id="telefone" Label="Telefone" value="#{pessoaBean.pessoa.telefone}"
			required="true" maxlength="10" requiredMessage="Favor informar o Telefone." &gt;			
		&lt;/h:inputText&gt;

		&lt;h:outputLabel value="Endereco:" for="endereco" /&gt;
		&lt;h:inputText id="endereco" Label="Endereco" value="#{pessoaBean.pessoa.endereco}"
			required="true" size="50" maxlength="30" requiredMessage="Favor informar o Endereco." /&gt;
			
		&lt;h:outputLabel value="Sexo:" for="sexo"/&gt;
			&lt;h:selectOneMenu id="sexo" value="#{pessoaBean.pessoa.sexo}" required="true" requiredMessage="Favor informar o Sexo."&gt;
				&lt;f:selectItem itemValue="" itemLabel="Selecione..."/&gt;
				&lt;f:selectItem itemValue="M" itemLabel="Masculino"/&gt;
				&lt;f:selectItem itemValue="F" itemLabel="Feminino"/&gt;
			&lt;/h:selectOneMenu&gt;

		&lt;h:outputText /&gt;
			
	&lt;/h:panelGrid&gt;
	&lt;h:panelGrid columns="3"&gt;
		&lt;h:commandButton action="#{pessoaBean.salvar}" rendered="#{empty pessoaBean.pessoa.codigo}"  value="Salvar" /&gt;
		&lt;h:commandButton action="#{pessoaBean.alterar}" rendered="#{!empty pessoaBean.pessoa.codigo}" value="Alterar" /&gt;
		&lt;h:commandButton action="#{pessoaBean.listarPessoa}" immediate="true"  value="Listar usuarios" /&gt;	
	&lt;/h:panelGrid&gt;
	
&lt;/h:form&gt;
&lt;hr /&gt;

</h:body>

</html>
[/code][/quote]

Utilize Primefaces com o JSF, ai é so utilizar a tag <p:inputMask mask="(99) 999-9999" />

#4

George,

Tente colocar:

<h:form prependId="false">

O Primefaces também é uma alternativa, porém deve ser utilizado com moderação, pois pode deixar a página muito pesada.

#5

Tente ver esse link se ajuda: http://serjaum.wordpress.com/2009/07/25/jsf-mascaras-com-jquery/

Você deveria utilizar ou richFaces ou Prime para JSF, assim você poderia utilizar os patterns também para formatar valores e datas: http://docs.oracle.com/cd/E16764_01/web.1111/b31973/af_validate.htm

algo como:

&lt;h:inputText id="textValor" value="#{...}"&gt;
    &lt;f:convertNumber pattern="#.###.##0,00"/&gt;
&lt;/h:inputText&gt;

Nessa discussão ele usava JSF com JQuery: http://www.guj.com.br/java/101919-mascara-de-cnpj-no-inputtext-do-jsf

Espero ter ajudado :smiley:

#6

Obrigado, o comando:

&lt;h:form prependId="false"&gt;

Funcionou!!

#7