このコード行は、html5を使用するときにプレースホルダーテキスト「入力してください」を含むinputtextフィールドをレンダリングするべきではありませんか?
<h:inputText placeholder="fill me" />
プレースホルダーテキストが表示されません。 JSFではないものはすべて、レンダリングのためにブラウザーに渡されると思いましたか?
JSFではないものはすべてレンダリングのためにブラウザに渡されると思いましたか?
したがって、この仮定は間違っています。 未指定 コンポーネント属性はJSFレンダラーによって無視されます。
基本的に次のオプションがあり、動作させることができます。
すでにJSF 2.2以降を使用している場合は、 passthrough attribute として設定します。
<... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
<h:inputText a:placeholder="fill me" />
PrimeFacesのデフォルトのXML名前空間プレフィックスa
と衝突するため、チュートリアルに示されているp
の代わりにp
( "attribute")のXML名前空間プレフィックスを使用していることに注意してください。
<h:inputText>
のカスタムレンダラーを実装します。ここでは、明示的に属性をチェックして書き込みます。
前述のカスタムレンダラーを使用するカスタムコンポーネントを実装します。
DOMから要素を取得し、明示的に属性を設定するJSベースのソリューションを実装します。
すぐにこれをサポートするコンポーネントライブラリを探します。 PrimeFaces には、たとえば <p:watermark>
があります。この目的のために、入力でplaceholder
属性をサポートしないブラウザのNice JSベースのグレースフルデグラデーションを使用します。
標準コンポーネントセットにHTML5サポートを追加するレンダーキットを探します。 OmniFaces たとえば、この目的のために Html5RenderKit があります。
PrimefacesとJSF 2.0+を使用している場合はplaceholder
属性またはp:watermark
を使用して、またはJSF 2.2が利用可能な場合はpt:placeholder
属性を使用できます。
Primefaces
<p:inputText id="search_input_id" value="#{watermarkBean.keyword}"
required="true" label="Keyword" placeholder="fill me" />
レガシーブラウザサポート(JSソリューションを追加):
<p:inputText id="search_input_id" value="#{watermarkBean.keyword}"
required="true" label="Keyword" />
<p:watermark for="search_input_id" value="fill me" />
JSF 2.2(PFなし)
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
</h:head>
<h:body>
<h:inputText value="#{bean.value}" pt:placeholder="fill me"/>
</h:body>
</html>
基本的にHTML 5を生成します
<input placeholder="fill me" />
this answerをご覧ください。
JSF 2.2では、次のような未指定の属性をパススルーできます。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
>
<h:inputText p:placeholder="fill me"></h:inputText>
バージョン4.3以降でRichFacesを使用している場合、この目的のために、タグ「rich:placeholder」を使用できます こちら 。基本的に:
<h:inputText id="myInput">
<rich:placeholder value="My placeholder text"></rich:placeholder>
</h:inputText>
これを試して
<h:inputText id="name" value="#{login.userId}" class="aux1" />
<h:inputSecret id="password" value="#{login.password}" redisplay="true" class="aux2" autocomplete="off" />
<script>
$('.aux1').attr('placeholder', 'Introducir Usuario');
$('.aux2').attr('placeholder', 'Introducir Contraseña');
</script>
JQueryを使用すると、これが適切に機能します。
BaluScが言ったように、それは非常に簡単でブラウザーに依存しないコードです。primefacesでは、p:watermark
必要な機能を取得します。公式デモは [〜#〜] here [〜#〜]
入力フィールドをプレースホルダーテキストでレンダリングする最も簡単な方法は、elementary input tagを使用することです
例:
<input type="text" placeholder="Fill me" value="#{EL}"/>
注:名前空間を含める必要はありません
Primeface 4.0を使用します。このバージョンより下のバージョンは、プレースホルダー属性をサポートしていません。
名前空間を使用するxmlns:pt="http://Java.Sun.com/jsf/passthrough"
。
p:inputTextarea id="textAreaValue" pt:placeholder="your text"
inputTextArea
に新しい行を挿入しないでください。