PrimeFaces – テキスト入力のウォーターマーク
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透かしコンポーネントを使用して透かし効果を作成する方法、およびテキストの色をスタイルする方法について説明します。
使用されるツール:
-
PrimeFaces 3.3
-
JSF 2.2.11
-
Eclipse 4.2
-
Maven 3
-
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"; } }
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://タグ/透かし/[透かし]