Default text (placeholder) in InputText component

Question

I want to display a default Informative text in JSF/Primefaces inputText component.

• This text should disappear when user clicks on Text field.
• Appear when he clicks outside without typing anything.
• If user submits the form without any value, this default value should not be set to Bean's Property.

I'm aware that setting the default value to BeanProperty in ManagedBean will work,but I don't want that.
Please suggest any JQuery tweaks,If possible.
Redirect me to right Question if this question is Duplicate.

Answer 1

Primefaces provides a placeholder attribute in its latest versions which you can use for p:inputText. Also, there is a p:watermark component which creates a JS based solution for legacy browser compatibility. So you don't definitely need to set a default value into the backing bean. Just use one of the following solutions:

<h:outputLabel value="Search: "/>  
<p:inputText id="search_input_id" value="#{watermarkBean.keyword}" 
    required="true" label="Keyword" placeholder="search" />  

For legacy browsers:

<h:outputLabel value="Search: "/>  
<p:inputText id="search_input_id" value="#{watermarkBean.keyword}" 
    required="true" label="Keyword" />  
<p:watermark for="search_input_id" value="search" />

Also if using JSF 2.2, you can use its passthrough attributes. Adding xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" namespace to your page, you can achieve in the following way, both for JSF h:inputText and Primefaces p:inputText:

<h:inputText value="#{watermarkBean.keyword}"
    pt:placeholder="search" />

Or wrapping it into the tag with a TagHandler:

<h:inputText value="#{watermarkBean.keyword}">
    <f:passThroughAttribute name="placeholder"
        value="search"/>
</h:inputText>

Which creates HTML 5 based input with placeholder attribute:

<input placeholder="search"> 

Answer 2

A jQuery tweak would be:

<p:inputText styleClass="search" value="#{filter.search}"/>
<script type="text/javascript">
  $('input.search).attr('placeholder','search');
</script>

You don't need to put an extra component in order to set attribute only, and you can mass-enrich inputs (if you need to).