Create an ASP.NET TextBox Watermark Effect using jQuery

This is simple to create an ASP.NET TextBox Watermark Effect using jQuery

Step 1. Reference javascript plug-in

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

Step 2. Add style to gray out watermark

<style>

.watermark
{

font-family: Calibri, Arial;

font-size: 14px;

color:gray;

}

</style>

Step 3 Bellow will remove text, when user click on textbox to type value

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

Step 4.

Mention text and tool-tip property of text box control with class="water" example

<asp:TextBox ID="txtEmail" Text="Email"

      Tooltip="Email" class="water" runat="server" MaxLength="70"></asp:TextBox>