Default text (placeholder) in InputText component

问题

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.

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

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

来源：https://stackoverflow.com/questions/18232097/default-text-placeholder-in-inputtext-component

标签

jquery

jsf

jsf-2

primefaces

placeholder