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)
	}
});














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














<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