A simple jQuery example to show you how to implement a watermark text effect on an input field.

1. Code Snippets

An email input field and css watermark class.


<style type="text/css">
   	input.watermark { color: #999; } //light silver color
</style>

<label>Email : </lable>
<input id="email" type="text" />

jQuery to apply the watermark effect on email field.


$(document).ready(function() {
	
	var watermark = 'Puts your email address';
	
	//init, set watermark text and class
	$('#email').val(watermark).addClass('watermark');
	
	//if blur and no value inside, set watermark text and class again.
 	$('#email').blur(function(){
  		if ($(this).val().length == 0){
    		$(this).val(watermark).addClass('watermark');
		}
 	});

	//if focus and text is watermrk, set it to empty and remove the watermark class
	$('#email').focus(function(){
  		if ($(this).val() == watermark){
    		$(this).val('').removeClass('watermark');
		}
 	});
});

2. Demo

Complete HTML source code.


<html>
<head>
<title>jQuery and watermark example</title>
 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 
<style type="text/css">
   	input.watermark { color: #999; }
	input {
		padding:4px;
		text-indent: 5px;
		width:200px;
		font-size:14px;
	}
</style>
</head>
 
<body>
 
<script type="text/javascript">
$(document).ready(function() {
	
	var watermark = 'Puts your email address';
	
	//init, set watermark text and class
	$('#email').val(watermark).addClass('watermark');
	
	//if blur and no value inside, set watermark text and class again.
 	$('#email').blur(function(){
  		if ($(this).val().length == 0){
    		$(this).val(watermark).addClass('watermark');
		}
 	});

	//if focus and text is watermrk, set it to empty and remove the watermark class
	$('#email').focus(function(){
  		if ($(this).val() == watermark){
    		$(this).val('').removeClass('watermark');
		}
 	});
});

</script>

<div class="ads-in-post hide_if_width_less_800">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- new 728x90 - After2ndH4 -->
<ins class="adsbygoogle hide_if_width_less_800" 
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="3642936086"
	 data-ad-region="mkyongregion"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><h2>jQuery - Watermark on input text</h2>
<label>Email : </lable>
<input id="email" type="text" />
 
</body>
</html>

Result.

Download Source Code

Download it – jQuery-watermark-input.zip (1kb)