Articles → JQUERY → Watermark Textbox Using Jquery

Watermark Textbox Using Jquery








Steps Of Implementation


<html><head><title>TextBox WaterMark</title></head><body></body></html>




<form id="form1" runat="server"><input type="text" id="txtName" /></form>


<script src="Script/jquery-latest.js" type="text/javascript"></script>




<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>




<style type="text/css">
.water {
	font-family: Verdana;
	color: gray;
	width: 200px;
}

.nowater {
	font-family: Verdana;
	color: black;
	width: 200px;
}
</style>




<input type="text" id="txtName" class="water" value="Type Email Id Here" title="Type Email Id Here" />










<script type="text/javascript">
       $(document).ready(function() {});
</script>




$("#txtName").focus(function() {
	if(($("#txtName")).attr('class') == "water") { // (a)
		$("#txtName").val(""); // (b)
		$("#txtName").removeClass("water"); // C
		$("#txtName").addClass("nowater"); // (d)
	}
});




  1. The first line of code checks whether the class of the textbox is water or not. This condition will happen when the page is loaded for the first time or if the user have not entered any text into the textbox.
  2. The second line of code set the text to blank if you are not making the textbox blank then when you click on the textbox the water mark text will be there.
  3. In the third point you are removing the class attribute of the textbox, because if you will not remove the class so when the user starts typing the text in the textbox it will show the text in gray color.
  4. Add nowater class in the textbox to show normal text in the textbox.
$("#txtName").blur(function() {
	if($.trim($("#txtName").val()) == "") { //(a)
		$("#txtName").val(this.title); //(b)
		$("#txtName").removeClass("nowater"); // C
		$("#txtName").addClass("water"); // (d)
	}
});




  1. In this line of code we are checking if there is any text entered by the user. If there will be no text then it means that we have to write water mark text.
  2. Set the title as text of the textbox, the point which I was discussing earlier. The title acts as a storage of the watermark text which we can retrieve later whenever we want.
  3. If there is no text in the textbox then remove the nowater class.
  4. Add water class.


<html><head><title>TextBox WaterMark</title><script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script><style type="text/css">
        .water
        {
            font-family: Verdana;
            color: gray;
            width: 200px;
        }
        .nowater
        {
            font-family: Verdana;
            color: black;
            width: 200px;
        }
    </style><script type="text/javascript">
        $(document).ready(function() {

            $("#txtName").focus(function() {
            if (($("#txtName")).attr('class') == "water") {
                $("#txtName").val("");
                $("#txtName").removeClass("water");
                $("#txtName").addClass("nowater");
                }
            });

            $("#txtName").blur(function() {
            if ($.trim($("#txtName").val()) == "") {
                $("#txtName").val(this.title);
                $("#txtName").removeClass("nowater");
                $("#txtName").addClass("water");
                }
            });
        });


 
    </script></head><body><form id="form1" runat="server"><div><input type="text" id="txtName" class="water" value="Type Email Id Here" title="Type Email Id Here" /></div></form></body></html>



Demo



Posted By  -  Karan Gupta
 
Posted On  -  Tuesday, August 9, 2011

Query/Feedback


Your Email Id
 
Subject
 
Query/FeedbackCharacters remaining 250