⁠19.5. <rich:placeholder>

The <rich:placeholder> component allows one to use functionality similar to the HTML5 placeholder attribute for input components.
This component brings a backward compatibility for HTML5 non-compliant browsers and some additional features:
  • per-component styling using styleClass attribute
  • application to multiple components at once using selector attribute
⁠

Example 19.8. <rich:placeholder> with input components

​<h:outputLabel value="Input text:" />
​<h:inputText id="input">
​    <rich:placeholder value="Type text here..." />
​</h:inputText>
​
​<h:outputLabel value="Textarea:" />
​<h:inputTextarea id="textarea">
​    <rich:placeholder value="A space for long content..." />
​</h:inputTextarea>
​
​<h:outputLabel value="Date:" />
​<rich:calendar datePattern="dd/M/yyyy" enableManualInput="true">
​    <rich:placeholder value="dd/mm/yyyy" />
​</rich:calendar>
⁠
<rich:placeholder>

Figure 19.2. <rich:placeholder>

⁠19.5.1. Reference data

  • component-type: org.richfaces.Placeholder
  • component-class: org.richfaces.component.UIPlaceholder
  • component-family: org.richfaces.Placeholder
  • renderer-type: org.richfaces.PlaceholderRenderer

⁠19.5.2. Style classes and skin parameters

⁠

Table 19.1. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-plhdr
This class identifies which input elements have their placeholder text managed by the placeholder component. Use this class to apply custom styles to the placeholder text.