PrimeFaces –文本输入上的水印

男娘i 2023-02-15 07:55 19阅读 0赞

在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水印组件创建水印效果，以及设置文本颜色的样式。

使用的工具 ：

1.  PrimeFaces 3.3
2.  JSF 2.2.11
3.  Eclipse 4.2
4.  Maven 3
5.  雄猫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*

![primefaces watermark example][]![primefaces watermark example][primefaces watermark example 1]

验证失败。

![primefaces watermark example error][]![primefaces watermark example error][primefaces watermark example error 1]

## 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` 。

参见演示，水印文本颜色更改为“蓝色”。

![primefaces watermark text color][]![primefaces watermark text color][primefaces watermark text color 1]

*PS已在IE9，Chrome和Safari上进行了测试。*

## 下载源代码 ##

> 下载它– [primefaces-watermark-example.zip][] （11 KB）

## 参考文献 ##

1.  [PrimeFaces水印组件展示柜][PrimeFaces]
2.  [如何更改<p：水印>的文本颜色][p]
3.  [使用CSS更改输入的HTML5占位符颜色][CSS_HTML5]
4.  [借助CSS对HTML5占位符进行样式化][CSS_HTML5 1]
5.  [样式占位符文本][Link 1]

标签： [primefaces][] [水印][Link 2]

> 翻译自: [https://mkyong.com/jsf2/primefaces/primefaces-watermark-on-text-input/][https_mkyong.com_jsf2_primefaces_primefaces-watermark-on-text-input]

[primefaces watermark example]: http://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5ta3lvbmcuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzEwL3ByaW1lZmFjZXMtd2F0ZXJtYXJrLWV4YW1wbGUucG5n?x-oss-process=image/format,png
[primefaces watermark example 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cubWt5b25nLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAxMi8xMC9wcmltZWZhY2VzLXdhdGVybWFyay1leGFtcGxlLnBuZw?x-oss-process=image/format,png
[primefaces watermark example error]: http://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5ta3lvbmcuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzEwL3ByaW1lZmFjZXMtd2F0ZXJtYXJrLWVycm9yLnBuZw?x-oss-process=image/format,png
[primefaces watermark example error 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cubWt5b25nLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAxMi8xMC9wcmltZWZhY2VzLXdhdGVybWFyay1lcnJvci5wbmc?x-oss-process=image/format,png
[primefaces watermark text color]: http://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5ta3lvbmcuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzEwL3ByaW1lZmFjZXMtd2F0ZXJtYXJrLXN0eWxlLnBuZw?x-oss-process=image/format,png
[primefaces watermark text color 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cubWt5b25nLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAxMi8xMC9wcmltZWZhY2VzLXdhdGVybWFyay1zdHlsZS5wbmc?x-oss-process=image/format,png
[primefaces-watermark-example.zip]: http://www.mkyong.com/wp-content/uploads/2012/10/primefaces-watermark-example.zip
[PrimeFaces]: http://www.primefaces.org/showcase/ui/watermark.jsf
[p]: http://forum.primefaces.org/viewtopic.php?f=3&t=17420
[CSS_HTML5]: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css
[CSS_HTML5 1]: http://www.splashnology.com/article/html5-placeholder-stylization-with-the-help-of-css/
[Link 1]: http://css-tricks.com/snippets/css/style-placeholder-text/
[primefaces]: https://mkyong.com/tag/primefaces/
[Link 2]: https://mkyong.com/tag/watermark/
[https_mkyong.com_jsf2_primefaces_primefaces-watermark-on-text-input]: https://mkyong.com/jsf2/primefaces/primefaces-watermark-on-text-input/