predefinito di testo (segnaposto) nel componente InputText

Question

voglio visualizzare un testo informativo default in JSF/primefaces inputText componente.

• Questo testo dovrebbe scomparire quando l'utente fa clic sul campo Testo.
• Appare quando fa clic all'esterno senza digitare nulla.
• Se l'utente invia il modulo senza alcun valore, questo valore predefinito non deve essere impostato su Proprietà del bean.

Sono consapevole che l'impostazione del valore predefinito su BeanProperty in ManagedBean funzionerà, ma non lo voglio.
Si prega di suggerire eventuali modifiche JQuery, se possibile.
Reindirizza a destra Domanda se questa domanda è duplicata.

Answer 1

Primefaces fornisce un attributo placeholder nelle sue ultime versioni che è possibile utilizzare per p:inputText. Inoltre, esiste un componente p:watermark che crea una soluzione basata su JS per la compatibilità con i browser legacy. Quindi non è assolutamente necessario impostare un valore predefinito nel bean di supporto. Basta usare una delle seguenti soluzioni:

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

Per i browser legacy:

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

Anche se si utilizza JSF 2.2, è possibile utilizzare i suoi attributi passante. L'aggiunta di xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" namespace alla tua pagina, è possibile ottenere in questo modo, sia per JSFh:inputText e Primefacesp:inputText:

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

O avvolgendolo nel tag con un TagHandler:

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

che crea HTML 5 based input con attributo placeholder:

<input placeholder="search"> 

Answer 2

un tweak jQuery sarebbe:

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

Non è necessario mettere un componente aggiuntivo al fine di impostare l'attributo solo, e si può arricchire di massa ingressi (se è necessario).