Inserir valores do tipo moeda com primefaces

14 respostas Resolvido
jsfprimefaces
R

Bom dia,
Estou utilizando primefaces para inserir um valor do tipo moeda:

<p:inputNumber id=“valor” value="#{movCapexController.selected.valor}" title="#{bundle.CreateMovCapexTitle_valor}" symbol=“R$ " required=“true” requiredMessage=“Preencha o campo Valor” decimalSeparator=”," thousandSeparator="." decimalPlaces=“2”/>

Só que dessa forma quando eu digito o valor: 123456 Ele entende como 123.456,00
Eu gostaria que ao digitar o valor, ele poderia já vir 1.234,56 sem que precisasse informar quais seriam as casas decimais através do teclado.

14 Respostas

E

Veja o site oficial:
https://www.primefaces.org/showcase/ui/input/inputNumber.xhtml

R

No site oficial não dá essa opção que eu desejo.
Todas as que existem lá, eu devo apertar a vírgula para que seja digitado uma casa decimal.

R

Alguém??

M

Estou também com este problema, porém se o usuário por o ponto no milhar da certo, porém não dá para contar com isso né? Aguardo solução também.

R

Aqui também está da mesma forma. Se ele inserir o ponto fica tudo bem, mas isso demanda do usuário algo que nunca podemos prever, que tipos de dados os mesmos vão inventar, haha

A

Eu uso esse componente do primefaces, porem precisa baixar o jar (ou procurar no maven)…

xmlns:pe=“http://primefaces.org/ui/extensions

<pe:inputNumber id="valTotal" emptyValue="0"  value="#{p.precoUnitario}" roundMethod="S" decimalPlaces="2" symbol="R$" 
                                             required="true" decimalSeparator="," thousandSeparator="." readonly="true"/>
R

@ardenghe, Não tem download do .jar das extensions no site oficial deles?

Existe o primefaces normal e o extensions? É isso?

Porque eu já utilizo o primefaces “normal”

A

isso… não sei onde baixar la do site cara… eu uso maven…

Só colocar la no pom.xml…

<dependency>
        <groupId>org.primefaces.extensions</groupId>
        <artifactId>primefaces-extensions</artifactId>
        <version>4.0.0</version>
    </dependency>
A

Achei…

https://mvnrepository.com/artifact/org.primefaces.extensions/primefaces-extensions/3.0.0

deve funcionar tbm…

R
Solucao aceita

@micmorba

Eu consegui resolver da seguinte forma:

Crie um arquivo JS e adicione isso:

/*
* @Copyright (c) 2011 Aurélio Saraiva, Diego Plentz
* @Page http://github.com/plentz/jquery-maskmoney
* try at http://plentz.org/maskmoney

* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/

/*
* @Version: 1.3
* @Release: 2011-04-20
* 
* Fixed the conflict with jquery.maskedinput.1.3.
* Emerson Carvalho <http://www.emersoncarvalho.com>
* 
*/
(function($) {
    $.fn.maskMoney = function(settings) {
        settings = $.extend({
            symbol: 'US$', 
            showSymbol: false, 
            symbolStay: false, 
            thousands: ',', 
            decimal: '.', 
            precision: 0, 
            defaultZero: true, 
            allowZero: false, 
            allowNegative: false
        }, settings);

        return this.each(function() {
            var input = $(this);


            /*
             *chamado quando uma tecla � pressionada dentro do campo
             */
            function mm_keypressEvent(e) {
                e = e||window.event;
                var k = e.charCode||e.keyCode||e.which;
                if (k == undefined) 
                    return false; //needed to handle an IE "special" event
                if (input.attr('readonly') && (k!=13&&k!=9)) 
                    return false; // don't allow editing of readonly fields but allow tab/enter

                if (k<48||k>57) { // any key except the numbers 0-9
                    if (k==45) { // -(minus) key
                        input.val(changeSign(input));
                        return false;
                    }
                    if (k==43) { // +(plus) key
                        input.val(input.val().replace('-',''));
                        return false;
                    } else if (k==13||k==9) { // enter key or tab key
                        return true;
                    } else if (k==37||k==39) { // left arrow key or right arrow key
                        return true;
                    } else { // any other key with keycode less than 48 and greater than 57
                        mm_preventDefault(e);
                        return true;
                    }
                } else if (input.val().length==input.attr('maxlength')) {
                    return false;
                } else {
                    mm_preventDefault(e);

                    var key = String.fromCharCode(k);
                    var x = input.get(0);
                    var selection = input.getInputSelection(x);
                    var startPos = selection.start;
                    var endPos = selection.end;
                    x.value = x.value.substring(0, startPos) + key + x.value.substring(endPos, x.value.length);
                    mm_maskAndPosition(x, startPos + 1);
                    return false;
                }
            }

            /*
             *evento chamado quando se pressiona uma tecla
             */
            function mm_keydownEvent(e) {
                e = e||window.event;
                var k = e.charCode||e.keyCode||e.which;
                if (k == undefined) 
                    return false; //needed to handle an IE "special" event
                if (input.attr('readonly') && (k!=13&&k!=9)) 
                    return false; // don't allow editing of readonly fields but allow tab/enter

                var x = input.get(0);
                var selection = input.getInputSelection(x);
                var startPos = selection.start;
                var endPos = selection.end;

                if (k==8) { // backspace key
                    mm_preventDefault(e);

                    if(startPos == endPos){
                        // Remove single character
                        x.value = x.value.substring(0, startPos - 1) + x.value.substring(endPos, x.value.length);
                        startPos = startPos - 1;
                    } else {
                        // Remove multiple characters
                        x.value = x.value.substring(0, startPos) + x.value.substring(endPos, x.value.length);
                    }
                    mm_maskAndPosition(x, startPos);
                    return false;
                } else if (k==9) { // tab key
                    return true;
                } else if (k==46||k==63272) { // delete key (with special case for safari)
                    mm_preventDefault(e);
                    if(x.selectionStart == x.selectionEnd){
                        // Remove single character
                        x.value = x.value.substring(0, startPos) + x.value.substring(endPos + 1, x.value.length);
                    } else {
                        //Remove multiple characters
                        x.value = x.value.substring(0, startPos) + x.value.substring(endPos, x.value.length);
                    }
                    mm_maskAndPosition(x, startPos);
                    return false;
                } else { // any other key
                    return true;
                }
            }

           
            /*
             * chamado quando o campo receber o focus
             */
            function mm_focusEvent(e) {
                var mask = mm_getDefaultMask();
                if (input.val()==mask) {
                    input.val('');
                } else if (input.val()==''&&settings.defaultZero) {
                    input.val(mm_setSymbol(mask));
                } else {
                    input.val(mm_setSymbol(input.val()));
                }
                if (this.createTextRange) {
                    var textRange = this.createTextRange();
                    textRange.collapse(false); // set the cursor at the end of the input
                    textRange.select();
                }
            }

            /*
             *chamado quando o evento blur ( deixar o campo, lost focus) � chamado
             */
            function mm_blurEvent(e) {
                if ($.browser.msie) {
                    mm_keypressEvent(e);
                }

                if (input.val()==''||input.val()==mm_setSymbol(mm_getDefaultMask())||input.val()==settings.symbol) {
                    if(!settings.allowZero) 
                        input.val('');
                    else if (!settings.symbolStay) 
                        input.val(mm_getDefaultMask());
                    else 
                        input.val(mm_setSymbol(mm_getDefaultMask()));
                } else {
                    if (!settings.symbolStay) 
                        input.val(input.val().replace(settings.symbol,''));
                    else if (settings.symbolStay&&input.val()==settings.symbol) 
                        input.val(mm_setSymbol(mm_getDefaultMask()));
                }
            }

            function mm_preventDefault(e) {
                if (e.preventDefault) { //standard browsers
                    e.preventDefault();
                } else { // internet explorer
                    e.returnValue = false
                }
            }

            function mm_maskAndPosition(x, startPos) {
                var originalLen = input.val().length;
                input.val(mm_maskValue(x.value));
                var newLen = input.val().length;
                startPos = startPos - (originalLen - newLen);
                input.setCursorPosition(startPos);
            }

            function mm_maskValue(v) {
                v = v.replace(settings.symbol,'');

                var strCheck = '[telefone removido]';
                var len = v.length;
                var a = '', t = '', neg='';

                if(len!=0 && v.charAt(0)=='-'){
                    v = v.replace('-','');
                    if(settings.allowNegative){
                        neg = '-';
                    }
                }

                if (len==0) {
                    if (!settings.defaultZero) return t;
                    t = '0.00';
                }

                for (var i = 0; i<len; i++) {
                    if ((v.charAt(i)!='0') && (v.charAt(i)!=settings.decimal)) break;
                }

                for (; i<len; i++) {
                    if (strCheck.indexOf(v.charAt(i))!=-1) a+= v.charAt(i);
                }

                var n = parseFloat(a);
                n = isNaN(n) ? 0 : n/Math.pow(10,settings.precision);
                t = n.toFixed(settings.precision);

                i = settings.precision == 0 ? 0 : 1;
                var p, d = (t=t.split('.'))[i].substr(0,settings.precision);
                for (p = (t=t[0]).length; (p-=3)>=1;) {
                    t = t.substr(0,p)+settings.thousands+t.substr(p);
                }

                return (settings.precision>0)
                ? mm_setSymbol(neg+t+settings.decimal+d+Array((settings.precision+1)-d.length).join(0))
                : mm_setSymbol(neg+t);
            }

            function mm_mask() {
                var value = input.val();
                input.val(mm_maskValue(value));
            }

            /*
             * verifica nas configuracoes quantas casas decimais
             * s�o necessarias para realizar a precisao
             * ir� retornar 0.00 por exemplo, conforme a configura��o
             */
            function mm_getDefaultMask() {
                var n = parseFloat('0')/Math.pow(10,settings.precision);
                return (n.toFixed(settings.precision)).replace(new RegExp('\\.','g'),settings.decimal);
            }

            /*
             * seta o simbola na mascara
             */
            function mm_setSymbol(v) {
                if (settings.showSymbol) {
                    if (v.substr(0, settings.symbol.length) != settings.symbol) return settings.symbol+v;
                }
                return v;
            }

            function mm_changeSign(i){
                if (settings.allowNegative) {
                    var vic = i.val();
                    if (i.val()!='' && i.val().charAt(0)=='-'){
                        return i.val().replace('-','');
                    } else{
                        return '-'+i.val();
                    }
                } else {
                    return i.val();
                }
            }

            input.bind('keypress.maskMoney',mm_keypressEvent);
            input.bind('keydown.maskMoney',mm_keydownEvent);
            input.bind('blur.maskMoney',mm_blurEvent);
//            input.bind('focus.maskMoney',mm_focusEvent);
//            input.bind('mask', mm_mask);

            input.one('unmaskMoney',function() {
                input.unbind('.maskMoney');

                if ($.browser.msie) {
                    this.onpaste= null;
                } else if ($.browser.mozilla) {
                    this.removeEventListener('input',mm_blurEvent,false);
                }
            });
        });
    }

    $.fn.unmaskMoney=function() {
        return this.trigger('unmaskMoney');
    };

    $.fn.mm_mask=function() {
        return this.trigger('mm_mask');
    };

    $.fn.setCursorPosition = function(pos) {
        this.each(function(index, elem) {
            if (elem.setSelectionRange) {
                elem.focus();
                elem.setSelectionRange(pos, pos);
            } else if (elem.createTextRange) {
                var range = elem.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        });
        return this;
    };

    $.fn.getInputSelection = function(el) {
        var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange;

        if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
            start = el.selectionStart;
            end = el.selectionEnd;
        } else {
            range = document.selection.createRange();

            if (range && range.parentElement() == el) {
                len = el.value.length;
                normalizedValue = el.value.replace(/\r\n/g, "\n");

                // Create a working TextRange that lives only in the input
                textInputRange = el.createTextRange();
                textInputRange.moveToBookmark(range.getBookmark());

                // Check if the start and end of the selection are at the very end
                // of the input, since moveStart/moveEnd doesn't return what we want
                // in those cases
                endRange = el.createTextRange();
                endRange.collapse(false);

                if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                    start = end = len;
                } else {
                    start = -textInputRange.moveStart("character", -len);
                    start += normalizedValue.slice(0, start).split("\n").length - 1;

                    if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                        end = len;
                    } else {
                        end = -textInputRange.moveEnd("character", -len);
                        end += normalizedValue.slice(0, end).split("\n").length - 1;
                    }
                }
            }
        }

        return {
            start: start,
            end: end
        };
    }
})(jQuery);

Após isso, basta chamar o arquivo na sua página. *O valor precisa estarem inputText e é referenciado na mask pelo id.

<h:outputScript name="js/jquery.maskMoney.js"/>

E passar os parâmetros que você deseja para a mask:

<script  type="text/javascript">
                    $(document).ready(format);
                    function format() {

                        jQuery('input[id*=cd]').unmaskMoney();
                        jQuery('input[id*=cd]').maskMoney({symbolStay: false, symbol: "R$ ", decimal: "", thousands: "", showSymbol: false});
                        
                        jQuery('input[id*=odex]').unmaskMoney();
                        jQuery('input[id*=odex]').maskMoney({symbolStay: false, symbol: "R$ ", decimal: "", thousands: "", showSymbol: false});
                        
                        jQuery('input[id*=valor]').unmaskMoney();
                        jQuery('input[id*=valor]').maskMoney({symbolStay: false, symbol: "R$ ", decimal: ",", thousands: ".", showSymbol: true, precision: 2 });
                        
                    }
                </script>

E adicione um <f:convertNumber pattern="#,##0.00"/> dentro do inputText

R

Na verdade está ocorrendo um erro, o primefaces não está deixando os valores serem passados, ocorre a seguinte exceção: :form :‘999,99’ deve ser um número decimal com sinal.

Só que isso está sendo feito pelo front-end, os valores não chegam a ser passados para o controller e essa validação não está sendo feita no MEU código.

Então não sei pra onde ir, nem dá pra debugar.

Alguém sabe o que pode ser?

R

@ardenghe Baixei a jar e coloquei como pe, mas mesmo assim ao inserir o valor 999, fica 999,00 e não 9,99 como era o desejado :confused:

A

Po, entendi… vou pesquisar aqui… pensei q ia resolver…

R

Consegui corrigir colocando um convertNumber dentro do inPut.
<f:convertNumber pattern="#,##0.00"/>

Criado 15 de janeiro de 2018
Ultima resposta 25 de jan. de 2018
Respostas 14
Participantes 4