【PrimeFaces】プレースホルダーを設定する

こんにちは。たろすです。

今回はPrimeFacesでプレースホルダーを設定する方法を紹介します。

普通のプレースホルダー

<p:inputText id="last-name" />
<p:watermark for="last-name" value="姓" />

<p:inputText id="first-name" />
<p:watermark for="first-name" value="名" />

inputTextにid属性を設定し、watermarkのfor属性でinputTextのidを指定します。

watermarkのvalue属性にはプレースホルダーとして表示したい文字列を設定します。　

出来上がりはこんな感じです。
（別途CSSを設定しています）

カーソルを合わせるとテキストボックスの外に表示されるプレースホルダー

<span class="ui-float-label">
	<p:inputText id="last-name" />
	<p:outputLabel for="last-name" value="姓" />
</span>
<span class="ui-float-label">
	<p:inputText id="first-name" />
	<p:outputLabel for="first-name" value="名" />
</span>

<span class="ui-float-label">でinputTextとoutputLableを囲みます。

inputTextにはid属性を設定し、outputLableのfor属性にinputTextのidを指定します。

outputLabelのvalue属性にはプレースホルダーとして表示したい文字列を設定します。

出来上がりはこんな感じです。

↓カーソルを合わせると

おわりに

PrimeFacesでプレースホルダーを設定する方法でした。