In RichFaces 4.3 we build upon a great work from Bernard Labno who prototyped the <rich:placeholder /> component and shared it in the RichFaces Sandbox.

This component gives you an ability similar to the HTML5’s placeholder – it pre-fills form inputs with text, which serves as a hint for users of what data is a particular input expects. Once you edit the input, the placeholder text will disappear.

You can try it out on the HTML 5 sample bellow:

So why do you need this new component?

The HTML 5 placeholder attribute doesn’t work in older browsers, so to ensure backward compatibility, you would need to use a JavaScript plugin like the one we have used: $.watermark.

With RichFaces, you can leverage that as simply as:

<h:inputText value="...">
    <rich:placeholder value="Type text here..." />
</h:inputText>

Example

Additional features

Placeholder styling

You can style the placeholder text by using the CSS

.rf-plhdr {
 color: #eee
}

or for each component specifically with styleClass:

<rich:placeholder styleClass="my-special-placeholder" />

Apply placeholder to multiple components

In order to apply placeholder to multiple components, you need to use @selector attribute:

<h:inputText styleClass ="my-placeholder" />
<h:inputText styleClass ="my-placeholder" />
<rich:placeholder selector=".my-placeholder" text="Fill in..." />

Support for a wide-range of components

We also make sure that <rich:placeholder /> works with all RichFaces input components, so you don’t need to cope with incompatibilities.

Give it a try

You can try this component in a RichFaces Showcase sample.

You can also read more about it in the RichFaces Component Reference and VDL documentation.