InputTextarea 2.x

TOCSTART

• Key Features
• Basic Configuration
• Customizing Styles
• Server-Side Event Listeners
• Client-Side Events
• Client-Side API

TOCEND

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

Online Demo

Key Features

• All features of the standard InputTextarea component
• Displaying prompt text
• Automatic growing depending on the entered text
• Extended styling

Basic Configuration

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

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

<o:inputTextarea value="#{InputTextareaBean.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:inputTextarea value="#{InputTextBean.email}" promptText="E-mail address"/>

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.

InputTextarea can be configured to automatically increase its height when the typed content exceeds its size.This feature can be used to create compact page layouts and allow comfortable input of an arbitrary amount of text at the same time. To turn on this feature just set autoGrowing attribute to "true" (it has a value of "false" by default).

Customizing Styles

You can apply styles for the InputTextarea 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 InputTextarea component.
rolloverStyle and rolloverClass	A style applied to the InputTextarea component in the rollover state.
focusedStyle and focusedClass	A style applied to the InputTextarea 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 InputTextarea component:

<o:inputTextarea id="styledInputTextarea"
                   style="background: beige; border: 2px solid pink; width: 160px; color: brown; font-weight: bold;"
                   promptText="E-mail address"
                   promptTextStyle="background: none; font-style: italic; font-weight: lighter; color:#7e7e7e;"
                   focusedStyle="border: 1px solid green;"/>

Server-Side Event Listeners

Given that the InputTextarea 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 HTMLInputTextarea component. You can also add a value change listener to the component by using the <f:valueChangeListener> tag.

Client-Side Events

The InputTextarea 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 InputTextarea 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 InputTextarea component. This function should be used instead of the usual value field assignment to get correct results in case when prompt text is used.