PrimeFaces – Watermark on text input

In PrimeFaces, your can use <p:watermark> to display watermark effect on input field. This watermark component is using HTML5 placeholder attribute in supported browsers like Safari, Chrome and Firefox, and fall back to JavaScript solution for non-support browser like IE.

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 *" />

In this tutorial, we will show you how to use PrimeFaces watermark component to create a watermark effect, and also style the text color.

Tools used :

  1. PrimeFaces 3.3
  2. JSF 2.2.11
  3. Eclipse 4.2
  4. Maven 3
  5. Tomcat 7

1. Watermark Example

Add text “username *” on top of the input text (watermark effect).

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. Demo

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

primefaces watermark example

Validation failed.

primefaces watermark example error

3. Change text color

A common request is change the default gray color text. To style it, you’ll need vendor prefix placeholder CSS properties :


/** 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;
}

For IE, not supports for HTML5 placeholder, PrimeFaces will add an extra .ui-watermark.

See demo, the watermark text color is changed to “blue”.

primefaces watermark text color

P.S Tested On IE9, Chrome and Safari.

Download Source Code

Download it – primefaces-watermark-example.zip (11 KB)

References

  1. PrimeFaces watermark component showcase
  2. How to change text color of <p:watermark>
  3. Change an input’s HTML5 placeholder color with CSS
  4. HTML5 Placeholder stylization with the help of CSS
  5. Style Placeholder Text

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
JavierAbdennour Recent comment authors
newest oldest most voted
Javier
Guest
Javier

Hi, Thanks for the tutorial. I’m a beginner using Primefaces and last days I have been doing some exercises with the framework. If you don’t mind I would like to ask you how can I implement a image inside a inputText using css. I tried with background-image in a custom css by overrinding some attributes and using styleClass=”myclass”. <p:inputText value='' id='username' styleClass='username'/> .username { background-image: url("search.gif") !important; background-repeat: no-repeat !important; background-position: left 1px !important; padding-left: 17px !important; } For some reason the image was not being displayed using styleClass attribute in the inputText component but if I use the style… Read more »

Abdennour
Guest
Abdennour

THanks .
I need source Code for uploading file via Primefaces.
Code which is in primefaces.org is not enough