This post will show you an easy way to add a JQuery textbox watermark in your application.
First make sure your application has the reference to the jquery file under the head section in your template header known as master page in asp.net. For e.g.
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
So here is your watermark ready to use.
- Now add below class in your project css class.
.watermark
{
font-style:italic;
}
- Now put the following JQuery code in your common JavaScript class for the project. If you don't have the add a new javascript class and then paste the below code
$(document).ready(function () {
ApplyWaterMark();
});
function ApplyWaterMark() {
$(".watermark").each(function () {
var txtVal = $(this).val();
$(this).focus(function () {
if ($(this).val() == txtVal) {
$(this).val('');
$(this).removeClass('watermark');
}
});
$(this).blur(function () {
if ($(this).val() == '') {
$(this).val(txtVal);
$(this).addClass('watermark');
}
});
});
}
<head>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
and the input control at your page under head section.
<input type="text" id="txtFirstName" value="Enter First Name" class="watermark"/>
<input type="text" id="TxtMiddleName" value="Enter Middle Name" class ="watermark"/>
<input type="text" id="TxtLastName" value="Enter Last Name" class="watermark" />
So here is your watermark ready to use.
1 comments:
Good Post!!! But what if one need to show watermark for password textbox. This code will not work. Read below post...
http://jquerybyexample.blogspot.com/2011/01/show-plain-text-as-watermark-for.html
Post a Comment