Create a textbox watermark using CSS and jQuery

Step 1: –

First of all, we need to reference the latest jquery plugin (at the time being  version 1.9.1):

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script>

Step 2:-

Add some styling to the textbox watermark, which is usually a light grey text font

<style>

.watermark
{

font-family: Calibri, Arial;

font-size: 14px;

color:gray;

}

</style>

Step 3:- 

Add the javascript to add or remove text on user click:

<script type=”text/javascript”>

$(function () {

$(“.watermark”).each(function () {

$textbox = $(this);
if ($textbox.val() != this.title) {
$textbox.removeClass(“watermark”);

}

});

$(“.watermark”).focus(function () {

$textbox = $(this);
if ($textbox.val() == this.title) {
$textbox.val(“”);
$textbox.removeClass(“watermark”);
}

});

$(“.watermark”).blur(function () {

$textbox = $(this);
if ($.trim($textbox.val()) == “”) {
$textbox.val(this.title);
$textbox.addClass(“watermark”);
}

});

});
</script>


(adsbygoogle = window.adsbygoogle || []).push({});

2 thoughts on “Create a textbox watermark using CSS and jQuery

  1. Pingback: HTML5 placeholder to replace jQuery watermark | Rochcass's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s