2013-08-14 8 views
5

enter image description hereデフォルトのテキスト(プレースホルダ)

私はJSF/Primefaces のinputTextコンポーネントのデフォルト情報テキストを表示したいです。

  • このテキストは、ユーザーがテキストフィールドをクリックすると消えます。
  • 何も入力せずに外部をクリックすると表示されます。
  • ユーザーが値を指定せずにフォームを送信した場合、このデフォルト値はBeanのプロパティに設定しないでください。

私はManagedBeanにBeanPropertyにデフォルト値を設定すると動作することを認識してんだけど、私はそれを望んでいません。
可能であれば、JQueryの調整をお勧めします。
私はこの質問が重複している場合は質問を右にリダイレクトしてください。

+1

基本的なHTML用語では、このことを「プレースホルダ」といいます。この新しい検索キーワードは手がかりを与えるはずです。 – BalusC

+4

'' –

+0

@XtremeBiker - 回答を投稿しませんか? – kolossus

答えて

14

は、p:inputTextに使用できる最新バージョンのplaceholder属性を提供します。また、従来のブラウザ互換性のためのJSベースのソリューションを作成するp:watermarkコンポーネントもあります。したがって、バッキングBeanにデフォルト値を設定する必要はありません。レガシーブラウザ用

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

:ただ、次のソリューションのいずれかを使用JSF 2.2を使用している場合も

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

を、あなたはそのパススルー属性を使用することができます。

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

HTML 5 basedを作成します。TagHandlerとタグにそれを包む

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

または:あなたのページにxmlns:pt="http://xmlns.jcp.org/jsf/passthrough"名前空間を追加するには、両方のJSFh:inputTextPrimefacesp:inputTextために、次のように達成することができますplaceholder属性の入力:

<input placeholder="search"> 
+0

良い答え。 OPのタグ付きJSF 2.2では、標準的な代替手段が提供されています。 OPがJSF 2.2に実際にそれを使用しているというタグが付いているか、もっと注意を引くと思っているので、私は100%確信していません。質問文やJSF 2.2を実際に使用していることをもう一度確認する以前に質問された質問は表示されません。 – BalusC

+0

あなたがそれを考慮する場合、私の答えを編集するか、新しいものを投稿すること自由に感じてください;-) –

+0

ありがとう@XtremeBiker –

1

jQueryの微調整は次のようになります。

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

あなたが唯一の属性を設定するために、余分な部品を配置する必要はありませんし、(必要であれば)あなたが入力を大量に豊かにすることができます。

関連する問題