Friday, March 23, 2012

Textbox watermark using jquery

<html>
<head>
<title></title>
<style type="text/css">
.gray
{
color: Gray;
}
.black
{
color: Black;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#txtDate").val("dd/mm/yyyy").addClass("gray");
$("#txtDate").focus(function () {
if ($("#txtDate").val() == "dd/mm/yyyy") {
$("#txtDate").val("").addClass("black").removeClass("gray");
}
});
$("#txtDate").focusout(function () {
if ($("#txtDate").val() == "") {
$("#txtDate").val("dd/mm/yyyy").addClass("gray").removeClass("black");
}
});
});
</script>
</head>
<body>
<input id="txtDate" type="text" />
</body>
</html>

1 comment: