在PrimeFaces中,您可以使用<p:watermark>
在输入字段上显示水印效果。 此水印组件在受支持的浏览器(例如Safari,Chrome和Firefox)中使用HTML5 placeholder
属性,对于不支持的浏览器(例如IE),则使用JavaScript解决方案。
Display watermark text in input field
<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
- 雄猫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 – Do nothing
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";
}
}
2.演示
http:// localhost:8080 / primefaces / index.jsf
验证失败。
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
。
参见演示,水印文本颜色更改为“蓝色”。
PS已在IE9,Chrome和Safari上进行了测试。
下载源代码
下载它– primefaces-watermark-example.zip (11 KB)
参考文献
标签: primefaces 水印
翻译自: https://mkyong.com/jsf2/primefaces/primefaces-watermark-on-text-input/