Create a textbox watermark using JQuery

<style
type="text/css">


.watermark

{


color: lightgrey;


font-style: italic;

}


</style>


<!--Add JQuery library reference-->


<script
type="text/javascript"
src="Scripts/jquery-1.4.1.js"></script>





<script
type="text/javascript">



     $(document).ready(function () {

     var val = "User Name";





     //assign some watermark value into variable

     if ($("#HeadLoginView_LoginUser_UserName").val() == "") {

     $("#HeadLoginView_LoginUser_UserName").val(val);

     }

     //Check if user and enter into the textbox and remove the class we have assigned on focus event of the text Box

     $("#HeadLoginView_LoginUser_UserName").focus(function () {

     if (this.value == val) {

     this.value = "";

     $("#HeadLoginView_LoginUser_UserName").removeClass("watermark"); //remove class when user focus on the textbox

     }



     });

     // If user did not enter any value in the text box then assign back the watermark value and assign the class

     $("#HeadLoginView_LoginUser_UserName").blur(function () {



     if (this.value == "") {

     this.value = val;

     $("#HeadLoginView_LoginUser_UserName").addClass("watermark"); // Add class to the textbox

     }

     });

     });


</script>