PrimeFaces –文本输入上的水印

最新推荐文章于 2024-08-22 20:04:04 发布

cyan20115

最新推荐文章于 2024-08-22 20:04:04 发布

阅读量236

点赞数

文章标签： xhtml ui javascript ViewUI

在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/

cyan20115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PrimeFaces –文本输入上的水印

在PrimeFaces中，您可以使用<p:watermark>在输入字段上显示水印效果。此水印组件在受支持的浏览器（例如Safari，Chrome和Firefox）中使用HTML5 placeholder属性，对于不支持的浏览器（例如IE），则使用JavaScript解决方案。 Display watermark text in input field<p:inputTe...
复制链接

扫一扫