Inserir valores do tipo moeda com primefaces

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.

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

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.

Algué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.

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

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"/>

@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”

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>

Achei…

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

deve funcionar tbm…

1 curtida

@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 = '0123456789';
                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

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?

@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:

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

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