how to format the number with comma when user lost focus in

Question

I want to format number with comma in jsf eg: when i type 100000 in the text field and when i go other field, the text field should display 100,000. I know it can be done in javascript, but I wonder know whether it can be done by jsf build in function. I try the with groupingUsed="true", but still doesn't work for me.

here is some of my jsf code:

    <h:outputLabel for="testing" value="testing ID *" />                      
    <h:inputText id="testing" required="true" label="testing" value="#{user.testing}" style="width:200px"  >  
      <f:convertNumber groupingUsed="true" for="testing"  /> 
    </h:inputText>

edited: I wish to know how to do in jsf 1.2 and jsf 2 both version.

Do you want to submit the value and format it on the server side? Or to format it using javascript? — DRCB, Jan 05 '12 at 10:16

score 2 · Answer 1 · answered Jan 05 '12 at 10:18

2

try:

<f:convertNumber pattern="###,###" />

answered Jan 05 '12 at 10:18

Ventsislav Marinov

594
1
6
14

thanks for your reply, but it only work after i click some commandbutton. I want it changes like onblur="" – heng heng Jan 05 '12 at 10:31

Mr.J4mes · Answer 2 · 2012-01-05T11:27:45.803

0

Without the Ajax capability of JSF 2.0, I think you should use a combination of client-side JavaScript and JSF's Converter. The client-side script will be something like this:

<script type="text/javascript">
   function convertFormat() {
      // function to add comma 
   }
</script>

<h:inputText id="testing" required="true" label="testing" value="#{user.testing}" style="width:200px" onblur="convertFormat();" />

And on the server side you should have a Converter to get the original number:

@FacesConverter("converter.numberFormatConverter")
public class NumberFormatConverter implements Converter {

    @Override
    public Object getAsObject(FacesContext context, UIComponent component, String value) {        
        value = value.replaceAll(",", "");
        return Long.parseLong(value); 
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component, Object value) {
        // add back the comma
    }

}

Your getAsObject method is the place for you to convert from HTML's input text to the type of input that you want (I used Long in my example). The getAsString method is the place for you to do the opposite thing.

I will let you figure out on your own how to add , in the client-side script. Hope this helps!

edited Jan 05 '12 at 11:27

answered Jan 05 '12 at 10:36

Mr.J4mes

9,168
9
48
90

greet!! it able to work in jsf version 2 but it doesn't work in jsf version 1.2 as 1.2 no support for tag f:ajax do u have other solutions for jsf version 1.2?? thanks a lot :) – heng heng Jan 05 '12 at 10:51
@xin_yao I have just updated my answer. When you ask a question, please add the proper tag. We have a tag for `jsf1.2`. :) – Mr.J4mes Jan 05 '12 at 11:28
@xin_yao Use Richfaces and a4j:ajax to adding this behavior. – Ventsislav Marinov Jan 05 '12 at 12:09
@Mr.J4mes, thanks for the answer. Actually I wish to know the solutions in both version 1.2 and 2. I do tried the javascript method already, just wonder to know whether jsf 1.2 can done by its built in function :) – heng heng Jan 06 '12 at 01:13
@VentsislavMarinov, thanks for your answer, but I never try richfaces before, will try for it when free :) – heng heng Jan 06 '12 at 01:14

how to format the number with comma when user lost focus in

2 Answers2