Default text (placeholder) in InputText component

Question

enter image description here

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.

In basic HTML terms, this thing is called "placeholder". This new search keyword should give you clues. — BalusC, Aug 14 '13 at 12:56
Done. As @BalusC says a clue keyword for this question is the **placeholder** word. I suggest Kishor P changing the question title to include this in some way. — Aritz, Aug 15 '13 at 10:47

Aritz · Accepted Answer · 2015-05-06T16:11:09.913

14

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">

edited May 06 '15 at 16:11

answered Aug 15 '13 at 10:37

Aritz

30,971
16
136
217

Good answer. Note that OP tagged JSF 2.2 which offers a standard alternative. I'm not 100% sure if the OP tagged JSF 2.2 because he is really using it, or because he thinks to get more attention. I'm not seeing anything in question text nor in previously asked questions which confirms once more that he's really using JSF 2.2. – BalusC Aug 15 '13 at 11:32
If you consider it, feel free to edit my answer or post a new one ;-) – Aritz Aug 15 '13 at 11:36
@BalusC : I didn't understood your comment entirely!! Can you please elaborate? should I not have tagged JSF2.2? Right now my current JSF version is 2.1 but I'm willing to upgrade if that offers a feasible solution! – Kishor Prakash Aug 15 '13 at 14:26
@Kishor: That comment was targeted on first version of this answer, before the edit. Click the link behind "edited X hours ago" below the answer and scroll down to see it. – BalusC Aug 15 '13 at 14:26
No, you should absolutely not have tagged JSF 2.2 if you aren't using it and the question is not specifically about JSF 2.2. You also don't tag C#, Android, GWT, etc, right? Do not abuse tags for the sake of getting attention. – BalusC Aug 15 '13 at 14:30

score 1 · Answer 2 · answered Apr 15 '14 at 12:21

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).

Default text (placeholder) in InputText component

2 Answers2

Linked