How to make upper case JSF input field on blur

Question

I would like to make the JTF input field in uppercase when the user moves the focus away from the field. Would it be better to do this with the f:ajax tag and the blur event will trigger the server to be uppercase, or would it be better to do it in JavaScript? What is the reason for not doing this in JavaScript? Is it better to always do such things using an ajax call on the server side?

Answer 1

There are really two ways to save this.

• Using JavaScript

   <h:inputText ... onblur="value=value.toUpperCase()" /> 

• Using JSF.

   <h:inputText ... converter="toUpperCaseConverter"> <f:ajax event="blur" render="@this" /> </h:inputText> 

   @FacesConverter("toUpperCaseConverter") public class ToUpperCaseConverter implements Converter { @Override public Object getAsObject(FacesContext context, UIComponent component, String submittedValue) { return (submittedValue != null) ? submittedValue.toUpperCase() : null; } @Override public String getAsString(FacesContext context, UIComponent component, Object modelValue) { return (modelValue != null) ? modelValue.toString() : ""; } } 

The JS approach is extremely simple. However, this undermines the enduser as it is fully run on the client side, under the full control of the end user. The end user can disable / skip this JS code and / or change the request parameter before it is actually sent to the server. The JSF approach cannot be tampered with, as this is done entirely on the server side, so this leads to a more reliable and reliable result.

You must decide based on the facts that best fit your business requirements.

Answer 2

Use this: style = "text-transform: uppercase", its working for me. And work with any platform you use :) I don’t think you need to use the difficult path to this simple thing.