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>
<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 Author
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.
very easy thanks
Thanks, awesome
In HTML5 you can use
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.
$.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’);
}
});
};
This is well written and simple. Thanks a million.
asdasdasd
Hi Mkyong,
What if type of input is password , how can you watermark input?
Two issues:
Try to put text as ‘Puts your email address’
Try to put couple of spaces
Thanks for sharing anyway.
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.
Where’s the issue with that?
$.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() } })
}
});
}
Rubbish, removes the text from the input if it matches the watermark
Actually, this can be easily achieved by using HTML5 placeholder.
Please refer to the following link for further details:
http://davidwalsh.name/html5-placeholder
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.