PrimeFacesでは、 `<p:watermark> ‘を使って入力フィールドに透かし効果を表示することができます。この透かしコンポーネントは、Safari、Chrome、FirefoxなどのサポートされているブラウザでHTML5のプレースホルダ属性を使用しており、IEなどの非サポートブラウザ用のJavaScriptソリューションにフォールバックしています。

入力フィールドに透かしテキストを表示する 

  <p:inputText id="username" required="true"
    label="username" size="40" value="#{userBean.username}"/>
  <p:watermark for="username" value="Username ** "/>

このチュートリアルでは、PrimeFaces透かしコンポーネントを使用して透かし効果を作成する方法、およびテキストの色をスタイルする方法について説明します。

使用されるツール:

  1. PrimeFaces 3.3

  2. JSF 2.2.11

  3. Eclipse 4.2

  4. Maven 3

  5. Tomcat 7

1.ウォーターマークの例

入力テキストの上にテキスト ”

username

** “を追加します（ウォーターマーク効果）。

index.xhtml 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>
<h:body>
    <f:facet name="last">
        <h:outputStylesheet library="mytheme" name="css/style.css"/>
    </f:facet>

    <h1>PrimeFaces watermark example</h1>

    <div style="width: 500px">
     <h:form>
        <p:inputText id="username" required="true" label="username" size="40"
        requiredMessage="Please enter your username."
        value="#{userBean.username}">
            <f:validateLength minimum="3" maximum="20"/>
        </p:inputText>
        <p:watermark for="username" value="Username ** "/>

        <p:message for="username"/>

        <p:commandButton value="test" style="margin:20px"
        action="#{userBean.register}" ajax="false"/>

      </h:form>
    </div>

</h:body>
</html>

UserBean.java – 何もしない 

package com.mkyong;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userBean")
@SessionScoped
public class UserBean {

    String username;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String register(){
        return "thanks";
    }

}

デモ



http://localhost:8080/primefaces/index.jsf


primefaces透かしの例、title = "primefaces-watermark-example"、width = 632、height = 388

検証に失敗しました。


primefaces透かしの例のエラー、title = "primefaces-watermark-error"、width = 593、height = 362

3.テキストの色を変更する

一般的な要求は、デフォルトの灰色のテキストを変更することです。スタイルを設定するには、ベンダープレフィックスのプレースホルダCSSプロパティが必要です。

…​./


chorme and safari


/::-webkit-input-placeholder {
color: blue !important;
font-weight: normal !important;
}
/


firefox


/:-moz-placeholder {
color: blue !important;
font-weight: normal !important;
}
/


IE


/.ui-watermark {
color: blue !important;
font-weight: normal !important;
} 

IEの場合、HTML5プレースホルダをサポートしていないため、PrimeFacesは追加の `.ui-watermark`を追加します。

デモを見ると、ウォーターマークのテキストの色が「青」に変わります。

image://wp-content/uploads/2012/10/primefaces-watermark-style.png[primefaces透かしテキストの色、title = "primefaces-watermark-style"、width = 592、height = 362]

__P.S、IE9、Chrome、Safariでテスト済み。

=== ソースコードをダウンロードする

ダウンロードする - リンク://wp-content/uploads/2012/10/primefaces-watermark-example.zip[primefaces-watermark-example.zip]（11 KB）

=== 参考文献

.  http://www.primefaces.org/showcase/ui/watermark.jsf[PrimeFaces

透かし成分のショーケース]。 http://forum.primefaces.org/viewtopic.php?f=3

<p:透かし>のテキスト色]。 http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css[Change

CSSの入力のHTML5プレースホルダーの色]。 http://www.splashnology.com/article/html5-placeholder-stylization-with-the-help-of-css/[HTML5

CSSの助けを借りてプレースホルダーのデザイン]。 http://css-tricks.com/snippets/css/style-placeholder-text/[Style

プレースホルダテキスト]

link://tag/primefaces/[primefaces]link://タグ/透かし/[透かし]