web-dev-qa-db-ja.com

JSF入力コンポーネントにプレースホルダー属性を追加する方法は？

このコード行は、html5を使用するときにプレースホルダーテキスト「入力してください」を含むinputtextフィールドをレンダリングするべきではありませんか？

<h:inputText placeholder="fill me" />

プレースホルダーテキストが表示されません。 JSFではないものはすべて、レンダリングのためにブラウザーに渡されると思いましたか？

jsfplaceholder
39
LuckyLuke

JSFではないものはすべてレンダリングのためにブラウザに渡されると思いましたか？

したがって、この仮定は間違っています。 未指定 コンポーネント属性はJSFレンダラーによって無視されます。

基本的に次のオプションがあり、動作させることができます。

  1. すでに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名前空間プレフィックスを使用していることに注意してください。

  2. <h:inputText>のカスタムレンダラーを実装します。ここでは、明示的に属性をチェックして書き込みます。

  3. 前述のカスタムレンダラーを使用するカスタムコンポーネントを実装します。

  4. DOMから要素を取得し、明示的に属性を設定するJSベースのソリューションを実装します。

  5. すぐにこれをサポートするコンポーネントライブラリを探します。 PrimeFaces には、たとえば <p:watermark> があります。この目的のために、入力でplaceholder属性をサポートしないブラウザのNice JSベースのグレースフルデグラデーションを使用します。

  6. 標準コンポーネントセットにHTML5サポートを追加するレンダーキットを探します。 OmniFaces たとえば、この目的のために Html5RenderKit があります。

こちらもご覧ください：

67
BalusC

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をご覧ください。

21
Xtreme Biker

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>
9
jmoreira

バージョン4.3以降でRichFacesを使用している場合、この目的のために、タグ「rich：placeholder」を使用できます こちら 。基本的に：

<h:inputText id="myInput">
    <rich:placeholder value="My placeholder text"></rich:placeholder>
</h:inputText>
7
Jose Antonio Escobar Garcia

これを試して

<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を使用すると、これが適切に機能します。

2
MarcoAndresito

BaluScが言ったように、それは非常に簡単でブラウザーに依存しないコードです。primefacesでは、p:watermark必要な機能を取得します。公式デモは [〜＃〜] here [〜＃〜]

1
Mr.Chowdary

入力フィールドをプレースホルダーテキストでレンダリングする最も簡単な方法は、elementary input tagを使用することです

例：

<input type="text" placeholder="Fill me" value="#{EL}"/>

注：名前空間を含める必要はありません

0
Ayoub Falah

Primeface 4.0を使用します。このバージョンより下のバージョンは、プレースホルダー属性をサポートしていません。

  1. 名前空間を使用するxmlns:pt="http://Java.Sun.com/jsf/passthrough"。

  2. p:inputTextarea id="textAreaValue" pt:placeholder="your text"

    inputTextAreaに新しい行を挿入しないでください。

0
Jayen Chondigara