Friday 8 November 2013

watermark example using jquery in asp.net

Share it Please
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
    </script>

    <style type="text/css">
        .water {
            font-family: Tahoma, Arial, sans-serif;
            color: gray;
        }
        .txtWidth {
            width: 200px;
        }
    </style>
    <script type="text/javascript">
        $(function () {

            $(".water").each(function () {
                $textbox = $(this);
                if ($textbox.val() != this.title) {
                    $textbox.removeClass("water");
                }
            });

            $(".water").focus(function () {
                $textbox = $(this);
                if ($textbox.val() == this.title) {
                    $textbox.val("");
                    $textbox.removeClass("water");
                }
            });

            $(".water").blur(function () {
                $textbox = $(this);
                if ($.trim($textbox.val()) == "") {
                    $textbox.val(this.title);
                    $textbox.addClass("water");
                }
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="smallDiv">
            <h2>Watermark Example</h2>
            <br />
            <div>
                <asp:TextBox ID="txtUserName" class="water txtWidth" Text="User Name"
                    ToolTip="User Name" runat="server"></asp:TextBox><br />
                <br />
                <asp:TextBox ID="txtPassword" class="water txtWidth" Text="Password"
                    ToolTip="Password" runat="server"></asp:TextBox><br />
                <br />
            </div>
               <br />
            <br />
            <div>
                <asp:Button ID="btnSubmit" runat="server" Text="Login"  />
            </div>
            <br />
            <br />
        </div>
    </form>
</body>
</html>

No comments:

Post a Comment

Followers

Follow The Author