[Resolvido] Ajuda Máscara moeda Primefaces

Nader_Daher · Novembro 23, 2011, 4:56pm

Fala galera, pesquisei muito para tentar mascarar um inputText do primefaces para moeda, a única coisa que achei foi sobre o maskMoney, mas não funiona comigo, além disso já tentei usar um método ue sempre uso em javascrip pra mascarar, mas não funciona também, aluém ja usou um inputText do primefaces com mascara de dinheiro???

leonardobhbr · Novembro 23, 2011, 5:25pm

Não tem como usar o mask do prime pois valor não tem mascara fixa.
Tera que ser o input mesmo e utilizar o javascript ou jquery

jquery tem umas bibliotecas com Money, currency, etc

segue um post que pode te ajudar

http://www.guj.com.br/java/258792-formatacao-de-campos-usando-o-jquery

Nader_Daher · Novembro 24, 2011, 9:31am

Obrigado pela resposta, já tinha visto aquele tópico antes, e usei aquela função javascript que vc postou lá, mas não dá certo!, não acontece nada, isso acontece com qualquer função javascript que tento usar…

Vou postar o código da minha página xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:head>
        <h:outputScript library="js" name="script.js" />
    </h:head>

    <h:body>

        <script>
function mascara(o, f) {
        v_obj = o;
        v_fun = f;
        setTimeout("execmascara()", 1);
}

function execmascara() {
        v_obj.value = v_fun(v_obj.value);
}

function data(v) {
        v = v.replace(/\D/g, "");
        v = v.replace(/[0-9]{9}/, "invÃ¡lido");
        v = v.replace(/(\d{2})(\d)/, "$1/$2");
        v = v.replace(/(\d{2})(\d)/, "$1/$2");
        return v;
}
        </script>

        <ui:composition template="./newTemplate.xhtml">

            <ui:define name="top">
                top
            </ui:define>

            <ui:define name="left">
                <h:form id="formCliente">
                    <p:menu>
                        <p:submenu label="Cadastros">
                            <p:menuitem value="Cliente" url="/faces/cadastro_cliente.xhtml" icon="ui-icon ui-icon-disk"/>
                            <p:menuitem value="Fornecedor" url="/faces/cadastro_fornecedor.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Vendedor" url="/faces/cadastro_vendedor.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Unidade de Medida" url="/faces/cadastro_unidade_medida.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Categoria" url="/faces/cadastro_categoria.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Marca" url="/faces/cadastro_marca.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Produto" url="/faces/cadastro_produto.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                        </p:submenu>
                        <p:submenu label="Non-Ajax Menuitem">
                            <p:menuitem value="Delete" url="http://www.primefaces.org" ajax="false" icon="ui-icon ui-icon-close"/>
                        </p:submenu>
                        <p:submenu label="Navigations">
                            <p:menuitem value="Home" url="http://www.primefaces.org" icon="ui-icon ui-icon-home"/>
                            <p:menuitem value="TouchFaces" url="#{request.contextPath}/touch" icon="ui-icon ui-icon-star"/>
                        </p:submenu>
                    </p:menu>


                </h:form>
            </ui:define>

            <ui:define name="content">

                <h:form id="form" prependId="false">
                    <p:panel header="Cadastro de Produto">
                        <p:messages />
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Nome:" for="nome" />
                            <p:inputText id="nome" label="nome" value="#{ProdutoBean.produto.nome}" maxlength="50" size="50" style="text-transform:uppercase" required="true" requiredMessage="Informe o nome"/>

                            <h:outputText value="Marca:" />
                            <p:selectOneMenu id="marca" value="#{ProdutoBean.produto.codMarca}" height="120" style="width: 150px"  required="true" requiredMessage="Selecione a Marca">
                                <f:selectItem itemLabel="Selecione" itemValue=""/>
                                <f:selectItems value="#{MarcaBean.listMarca}"/>
                            </p:selectOneMenu>

                            <h:outputText value="Categoria:" />
                            <p:selectOneMenu id="categoria" value="#{ProdutoBean.produto.codCategoria}" height="120" style="width: 150px"  required="true" requiredMessage="Selecione a Categoria">
                                <f:selectItem itemLabel="Selecione" itemValue=""/>
                                <f:selectItems value="#{CategoriaBean.listCategoria}"/>
                            </p:selectOneMenu>

                            <h:outputText value="Unidade de Medida:" />
                            <p:selectOneMenu id="unidade" value="#{ProdutoBean.produto.codCategoria}" height="120" style="width: 150px"  required="true" requiredMessage="Selecione a Unidade de Medida">
                                <f:selectItem itemLabel="Selecione" itemValue=""/>
                                <f:selectItems value="#{UnidadeMedidaBean.listUnidade}"/>
                            </p:selectOneMenu>

                            <h:outputLabel value="Preço Unitário:" for="custoUni" />
                            <h:inputText id="custoUni"  label="custoUni" value="#{ProdutoBean.produto.custoUni}" style="text-align:right;width: 98px;" maxlength="11" size="50" required="true" requiredMessage="Informe o Preço unitário"  onkeypress="mascara(this, data);"/>





                            <p:commandButton id="btnSalvar" value="Cadastrar" actionListener="#{ProdutoBean.produto.salvar}" update="form" />
                        </h:panelGrid>
                    </p:panel>
                </h:form>

            </ui:define>

        </ui:composition>

    </h:body>
</html>

Nader_Daher · Novembro 24, 2011, 10:18am

Não importa se eu colocar <h:InpuText ou <p:INputText, naão chama o javascript

leonardobhbr · Novembro 24, 2011, 10:54am

coloque o codigo javascript no head e não no body

leonardobhbr · Novembro 24, 2011, 10:56am

a mascara que passou e pra campo data para valor utilze

function valor(v) {
	v = v.replace(/\D/g, "");
	v = v.replace(/[0-9]{15}/, "invÃ¡lido");
	v = v.replace(/(\d{1})(\d{11})$/, "$1.$2"); // coloca ponto antes dos
	// Ãºltimos 11 digitos
	v = v.replace(/(\d{1})(\d{8})$/, "$1.$2"); // coloca ponto antes dos
	// Ãºltimos 8 digitos
	v = v.replace(/(\d{1})(\d{5})$/, "$1.$2"); // coloca ponto antes dos
	// Ãºltimos 5 digitos
	v = v.replace(/(\d{1})(\d{1,2})$/, "$1,$2"); // coloca virgula antes dos
	// Ãºltimos 2 digitos
	return v;
}

Nader_Daher · Novembro 24, 2011, 11:21am

Coloquei no head e continua sem funcionar!

[code]<?xml version='1.0' encoding='UTF-8' ?>

              <ui:insert name="head"></ui:insert>

        </f:facet>



        <script type="text/javascript">
            function mascara(o, f) {
        v_obj = o;
        v_fun = f;
        setTimeout("execmascara()", 1);
           }

        function execmascara() {
        v_obj.value = v_fun(v_obj.value);
        }

        function valor(v) {
        v = v.replace(/\D/g, "");
        v = v.replace(/[0-9]{15}/, "invÃ¡lido");
        v = v.replace(/(\d{1})(\d{11})$/, "$1.$2"); // coloca ponto antes dos
        // Ãºltimos 11 digitos
        v = v.replace(/(\d{1})(\d{8})$/, "$1.$2"); // coloca ponto antes dos
        // Ãºltimos 8 digitos
        v = v.replace(/(\d{1})(\d{5})$/, "$1.$2"); // coloca ponto antes dos
        // Ãºltimos 5 digitos
        v = v.replace(/(\d{1})(\d{1,2})$/, "$1,$2"); // coloca virgula antes dos
        // Ãºltimos 2 digitos
        return v;
}
        </script>
    </h:head>

    <h:body>



        <ui:composition template="./newTemplate.xhtml">

            <ui:define name="top">
                top
            </ui:define>

            <ui:define name="left">
                <h:form id="formCliente">
                    <p:menu>
                        <p:submenu label="Cadastros">
                            <p:menuitem value="Cliente" url="/faces/cadastro_cliente.xhtml" icon="ui-icon ui-icon-disk"/>
                            <p:menuitem value="Fornecedor" url="/faces/cadastro_fornecedor.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Vendedor" url="/faces/cadastro_vendedor.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Unidade de Medida" url="/faces/cadastro_unidade_medida.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Categoria" url="/faces/cadastro_categoria.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Marca" url="/faces/cadastro_marca.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            <p:menuitem value="Produto" url="/faces/cadastro_produto.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                        </p:submenu>
                        <p:submenu label="Non-Ajax Menuitem">
                            <p:menuitem value="Delete" url="http://www.primefaces.org" ajax="false" icon="ui-icon ui-icon-close"/>
                        </p:submenu>
                        <p:submenu label="Navigations">
                            <p:menuitem value="Home" url="http://www.primefaces.org" icon="ui-icon ui-icon-home"/>
                            <p:menuitem value="TouchFaces" url="#{request.contextPath}/touch" icon="ui-icon ui-icon-star"/>
                        </p:submenu>
                    </p:menu>


                </h:form>
            </ui:define>

            <ui:define name="content">

                <h:form id="form" prependId="false">
                    <p:panel header="Cadastro de Produto">
                        <p:messages />
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Nome:" for="nome" />
                            <p:inputText id="nome" label="nome" value="#{ProdutoBean.produto.nome}" maxlength="50" size="50" style="text-transform:uppercase" required="true" requiredMessage="Informe o nome"/>

                            <h:outputText value="Marca:" />
                            <p:selectOneMenu id="marca" value="#{ProdutoBean.produto.codMarca}" height="120" style="width: 150px"  required="true" requiredMessage="Selecione a Marca">
                                <f:selectItem itemLabel="Selecione" itemValue=""/>
                                <f:selectItems value="#{MarcaBean.listMarca}"/>
                            </p:selectOneMenu>

                            <h:outputText value="Categoria:" />
                            <p:selectOneMenu id="categoria" value="#{ProdutoBean.produto.codCategoria}" height="120" style="width: 150px"  required="true" requiredMessage="Selecione a Categoria">
                                <f:selectItem itemLabel="Selecione" itemValue=""/>
                                <f:selectItems value="#{CategoriaBean.listCategoria}"/>
                            </p:selectOneMenu>

                            <h:outputText value="Unidade de Medida:" />
                            <p:selectOneMenu id="unidade" value="#{ProdutoBean.produto.codCategoria}" height="120" style="width: 150px"  required="true" requiredMessage="Selecione a Unidade de Medida">
                                <f:selectItem itemLabel="Selecione" itemValue=""/>
                                <f:selectItems value="#{UnidadeMedidaBean.listUnidade}"/>
                            </p:selectOneMenu>

                            <h:outputLabel value="Preço Unitário:" for="custoUni" />
                            <h:inputText id="custoUni"  label="custoUni" value="#{ProdutoBean.produto.custoUni}" maxlength="11" size="50" required="true" requiredMessage="Informe o Preço unitário"  onkeypress="mascara(this, valor);"/>



                            <p:commandButton id="btnSalvar" value="Cadastrar" actionListener="#{ProdutoBean.produto.salvar}" update="form" />
                        </h:panelGrid>
                    </p:panel>
                </h:form>

            </ui:define>

        </ui:composition>

    </h:body>
</f:view>

[/code]

Nader_Daher · Novembro 24, 2011, 12:29pm

Opa, corrigi, coloquei a função valor, e troquei a chamada para valor, e sege sem funcionar…

Parace que o javascript nao ta funcionando no meu projeto… qualuer função q coloco pra testar nao funfa.

leonardobhbr · Novembro 24, 2011, 1:01pm

faça o seguinte antes da tag

<h:head>

coloque

<f:view contentType="text/html">

e depois do fechamento da tag </h:body>

coloque
[/code]</f:view>[code]

Nader_Daher · Novembro 24, 2011, 1:31pm

leonardo, eu já tinha adicionado isso ao código, já que alguns componentes não estão aparecendo quando eu uso o internet explorer, mas mesmo assim, continua não aparecendo os componentes no ie, e o javascript ainda não funciona, segue o código de como ficou a página agora:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
        <f:view contentType="text/html">  
        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>

                  <ui:insert name="head"></ui:insert>

            </f:facet>



            <script type="text/javascript">
                function mascara(o, f) {
            v_obj = o;
            v_fun = f;
            setTimeout("execmascara()", 1);
               }

            function execmascara() {
            v_obj.value = v_fun(v_obj.value);
            }

            function valor(v) {
            v = v.replace(/\D/g, "");
            v = v.replace(/[0-9]{15}/, "invÃ¡lido");
            v = v.replace(/(\d{1})(\d{11})$/, "$1.$2"); // coloca ponto antes dos
            // Ãºltimos 11 digitos
            v = v.replace(/(\d{1})(\d{8})$/, "$1.$2"); // coloca ponto antes dos
            // Ãºltimos 8 digitos
            v = v.replace(/(\d{1})(\d{5})$/, "$1.$2"); // coloca ponto antes dos
            // Ãºltimos 5 digitos
            v = v.replace(/(\d{1})(\d{1,2})$/, "$1,$2"); // coloca virgula antes dos
            // Ãºltimos 2 digitos
            return v;
    }
            </script>
        </h:head>

        <h:body>



            <ui:composition template="./newTemplate.xhtml">

                <ui:define name="top">
                    top
                </ui:define>

                <ui:define name="left">
                    <h:form id="formCliente">
                        <p:menu>
                            <p:submenu label="Cadastros">
                                <p:menuitem value="Cliente" url="/faces/cadastro_cliente.xhtml" icon="ui-icon ui-icon-disk"/>
                                <p:menuitem value="Fornecedor" url="/faces/cadastro_fornecedor.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                                <p:menuitem value="Vendedor" url="/faces/cadastro_vendedor.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                                <p:menuitem value="Unidade de Medida" url="/faces/cadastro_unidade_medida.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                                <p:menuitem value="Categoria" url="/faces/cadastro_categoria.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                                <p:menuitem value="Marca" url="/faces/cadastro_marca.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                                <p:menuitem value="Produto" url="/faces/cadastro_produto.xhtml" icon="ui-icon ui-icon-arrowrefresh-1-w"/>
                            </p:submenu>
                            <p:submenu label="Non-Ajax Menuitem">
                                <p:menuitem value="Delete" url="http://www.primefaces.org" ajax="false" icon="ui-icon ui-icon-close"/>
                            </p:submenu>
                            <p:submenu label="Navigations">
                                <p:menuitem value="Home" url="http://www.primefaces.org" icon="ui-icon ui-icon-home"/>
                                <p:menuitem value="TouchFaces" url="#{request.contextPath}/touch" icon="ui-icon ui-icon-star"/>
                            </p:submenu>
                        </p:menu>


                    </h:form>
                </ui:define>

                <ui:define name="content">

                    <h:form id="form" prependId="false">
                        <p:panel header="Cadastro de Produto">
                            <p:messages />
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Nome:" for="nome" />
                                <p:inputText id="nome" label="nome" value="#{ProdutoBean.produto.nome}" maxlength="50" size="50" style="text-transform:uppercase" required="true" requiredMessage="Informe o nome"/>

                                <h:outputText value="Marca:" />
                                <p:selectOneMenu id="marca" value="#{ProdutoBean.produto.codMarca}" height="120" style="width: 150px"  required="true" requiredMessage="Selecione a Marca">
                                    <f:selectItem itemLabel="Selecione" itemValue=""/>
                                    <f:selectItems value="#{MarcaBean.listMarca}"/>
                                </p:selectOneMenu>

                                <h:outputText value="Categoria:" />
                                <p:selectOneMenu id="categoria" value="#{ProdutoBean.produto.codCategoria}" height="120" style="width: 150px"  required="true" requiredMessage="Selecione a Categoria">
                                    <f:selectItem itemLabel="Selecione" itemValue=""/>
                                    <f:selectItems value="#{CategoriaBean.listCategoria}"/>
                                </p:selectOneMenu>

                                <h:outputText value="Unidade de Medida:" />
                                <p:selectOneMenu id="unidade" value="#{ProdutoBean.produto.codCategoria}" height="120" style="width: 150px"  required="true" requiredMessage="Selecione a Unidade de Medida">
                                    <f:selectItem itemLabel="Selecione" itemValue=""/>
                                    <f:selectItems value="#{UnidadeMedidaBean.listUnidade}"/>
                                </p:selectOneMenu>

                                <h:outputLabel value="Preço Unitário:" for="custoUni" />
                                <h:inputText id="custoUni"  label="custoUni" value="#{ProdutoBean.produto.custoUni}" maxlength="11" size="50" required="true" requiredMessage="Informe o Preço unitário"  onkeypress="mascara(this, valor);"/>



                                <p:commandButton id="btnSalvar" value="Cadastrar" actionListener="#{ProdutoBean.produto.salvar}" update="form" />
                            </h:panelGrid>
                        </p:panel>
                    </h:form>

                </ui:define>

            </ui:composition>

        </h:body>
    </f:view>
</html>

Nader_Daher · Novembro 24, 2011, 3:34pm

Depurando pelo firebug acusa: mascara is not defined. O método javascript não está sendo reconhecido mesmo…

Nader_Daher · Novembro 24, 2011, 9:07pm

Depois de sofrer muito, finalmente consegui resolver este problema, não sei porque, mas como estou usando um template facelets, se colocasse a função javascript no <h:head> nao funcionava, tive que colocar no mesmo componente facelets do form, ai funcionou xD.

luxu · Janeiro 2, 2012, 3:43pm

Amigo, warrior dá pra postar essa solução, pois estou com mesmo problema…

Nader_Daher · Janeiro 2, 2012, 11:59pm

luxu,

eu uso a função abaixo, eu uso facelets, e tive que colocar a função dentro do ui:define onde estava o form pra poder funcionar…

[code]
function mascara(o, f) {
v_obj = o;
v_fun = f;
setTimeout(“execmascara()”, 1);
}

        function execmascara() {
          v_obj.value = v_fun(v_obj.value);
        }

     function valor(v) {
    v = v.replace(/\D/g, "");
    v = v.replace(/[0-9]{15}/, "invÃ¡lido");
    v = v.replace(/(\d{1})(\d{11})$/, "$1.$2"); // coloca ponto antes dos
    // Ãºltimos 11 digitos
    v = v.replace(/(\d{1})(\d{8})$/, "$1.$2"); // coloca ponto antes dos
    // Ãºltimos 8 digitos
    v = v.replace(/(\d{1})(\d{5})$/, "$1.$2"); // coloca ponto antes dos
    // Ãºltimos 5 digitos
    v = v.replace(/(\d{1})(\d{1,2})$/, "$1,$2"); // coloca virgula antes dos
    // Ãºltimos 2 digitos
    return v;

}

                </script>[/code]

no componente:

<p:inputText id="custoUni"  label="custoUni" value="#{ProdutoBean.valor}" maxlength="11" size="20" required="true" requiredMessage="Informe o Preço unitário" onkeypress="mascara(this, valor);" />

joaopaulotds · Setembro 20, 2012, 1:15pm

Essa solução funcionou comigo. Também uso facelets e coloquei a função dentro do ui:define. Obrigado warrior por compartilhar!

system · Dezembro 30, 2015, 9:39am

[Resolvido] Ajuda Máscara moeda Primefaces

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