jQuery – watermark effect on text input

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>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="8821506761"
     data-ad-format="auto"
     data-ad-region="mkyongregion"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><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)

About the Author

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

Comments

avatar
13 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
13 Comment authors
Borys LebedaMike JacobsRicardoSamkat Recent comment authors
newest oldest most voted
Borys Lebeda
Guest
Borys Lebeda

In HTML5 you can use

Mike Jacobs
Guest
Mike Jacobs

A quick note when using this: If you’re not otherwise specifying what the text box is for (outside of a watermark), your user will have no indication of what the text box is asking for if they have JavaScript disabled. Either use a proper label outside of the text box (as shown in the example) or set the default input value to “Puts your email address”, or whatever you want the default to be, directly in the HTML if you want it to degrade gracefully with JavaScript disabled.

Ricardo
Guest
Ricardo

$.fn.watermark = function (watermark) { return $(this) .val(watermark).removeClass(‘watermark’).addClass(‘watermark’) .blur(function () { if ($(this).val().length == 0) { $(this).val(watermark).addClass(‘watermark’); } }) .focus(function () { if ($(this).hasClass(‘watermark’)) { $(this).val(”).removeClass(‘watermark’); } }); };

Sam
Guest
Sam

very easy thanks

Aigle
Guest
Aigle

This is well written and simple. Thanks a million.

asdasdasd
Guest
asdasdasd

asdasdasd

Akif
Guest
Akif

Hi Mkyong,
What if type of input is password , how can you watermark input?

Jit
Guest
Jit

Two issues:

Try to put text as ‘Puts your email address’
Try to put couple of spaces

Thanks for sharing anyway.

kat
Guest
kat

Where’s the issue with that?

kat
Guest
kat

Ah, i looked at the code and you’re right, this is dumb.
If the input text matches the watermark text on next focus the text will be removed as it is considered watermark.

carson
Guest
carson

$.fn.watermark = function (watermark) { if (!watermark) { watermark = ‘water mark’; } return $(this) .val(watermark).animate({ color: ‘#999’ }) .blur(function () { if ($(this).val().length == 0) { $(this).val(watermark) } if ($(this).val() == watermark) { $(this).animate({ color: ‘#999’ }) } }) .focus(function () { if ($(this).val() == watermark) { $(this).animate({ color: ‘black’ }, { queue: false, step: function () { $(this).select() } }) } }); }

P11D
Guest
P11D

Rubbish, removes the text from the input if it matches the watermark

K
Guest
K

Thanks, awesome

Kelvin Tan
Guest
Kelvin Tan

Actually, this can be easily achieved by using HTML5 placeholder.
Please refer to the following link for further details:
http://davidwalsh.name/html5-placeholder

kat
Guest
kat

That’s only a HTML5 solution supported only on modern browsers and IE9+.
Unfortunately there are still many users using <IE8 in which the placeholder attribute is NOT supported.

trackback
7?21?????? | Javable.Jp

[…] jQuery – watermark effect on text input […]