InputText

The InputText component supports all of the features of the standard JSF InputText component and extends it with some additional features like rollover and focused styles and prompt text (is displayed when component's value is empty).


API Reference | Tag Reference
Online Demo

Key Features

Basic Configuration

The InputText component can be added to a page using the <o:inputText> tag. This tag is just an extended version of the standard <h:inputText> tag. Therefore, you can safely replace the standard InputText components with OpenFaces InputText components which gives you an additional functionality. Just like in the standard <h:inputText> the value attribute lets you specify the current value of the component.

The following example shows a definition of the InputText with the value attribute.

<o:inputText value="#{InputTextBean.email}" />


You can declare the promptText attribute if you'd like to display an auxiliary text when text field's value is empty. Here is an example:

<o:inputText value="#{InputTextBean.email}" promptText="E-mail address"/>

And here is the result:

Once you focus this component, the prompt text disappears for you to enter the text. If you leave the text field without entering the text, the prompt will be displayed again.

You can also specify a custom style for the prompt text as described below.

Customizing Styles

You can apply styles for the InputText component when it's in a normal, focused or rollover state.

The table below lists all style attributes:

Attribute Description
style and styleClass A style applied to the entire InputText component.
rolloverStyle and rolloverClass A style applied to the InputText component in the rollover state.
focusedStyle and focusedClass A style applied to the InputText component when it is focused.
promptTextStyle and promptTextClass A style applied to the prompt text.

The following example demonstrates the usage of style-related attributes of the InputText component:

<o:inputText id="styledInputText"
             style="background: beige; border: 2px solid brown; color: brown; font-weight: bold;"
             promptText="E-mail address"
             promptTextStyle="font-style: italic; color: #7e7e7e;"
             focusedStyle="border: 2px solid orange;"/>

And here is the result:

When the user is typing the value, this style is changed to the following:


Server-Side Event Listeners

Given that the InputText component is a UIInput component, it can fire javax.faces.event.ValueChangeEvent just like any other UIInput component does. To handle a value change event on the server side, the valueChangeListener attribute should be used in the same way as for the HTMLInputText component. You can also add a value change listener to the component by using the <f:valueChangeListener> tag.

Client-Side Events

The InputText component supports a set of standard client-side events such as onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmouseout, onmousemove, onselect, onchange, onfocus, onblur, onkeyup, onkeydown, onkeypress.

Client-Side API

All client-side API methods for the InputText component are listed in the following table:

Method Description
getValue() Returns a text currently entered in the InputText component on which this function is invoked. This function should be used instead of the usual value field to get a correct result in case when prompt text is used.
setValue(text) Sets a text for the InputText component. This function should be used instead of the usual value field assignment to get correct results in case when prompt text is used.
OpenFaces