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 09, 2011

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250