Home/ Questions/Q 7718509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T03:11:03+00:00

I found simple textbox watermark script that I was going to use in my

  • 0

I found simple textbox watermark script that I was going to use in my project but I can’t understand whats wrong, I tried debugging with Firebug and I can see it going through jquery code only once when page is loaded,after that textbox acts like nothing was binded to its focus or blur and I don’t see any breakpoints getting hitted in script, here is whole layout page with script:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>

    <style type="text/css">
    .water
    {
         font-family: Tahoma, Arial, sans-serif;
         color:gray;
    }
    </style>

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

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

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

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

    </script>
</head>
<body>
  <div class="wrapper">
    <div id="messageBox" align="center">
    </div>
        <div class="header">
            <div class="header-column">
               <h1 id="logo" class="no-border"><a href="/"><img src="../../Content/themes/base/images/ps-logo.png" style="margin-top:10px;" alt="" /></a></h1>
            </div>
            <div class="header-column lh50" align="center">
                <div>
                    <input type="text" ID="txtSearch" class="water" title="Search" value="" />
                </div>
            </div>
            <div class="header-column">
                <div class="main-menu lh50">
                    <ul>
                        <li>
                           @if(!Request.IsAuthenticated)
                           {
                                    <a href="Login">Login using
                                        <img alt="Facebook" src="../../Content/themes/base/icons/facebook-icon.png" class="login-icon" />
                                        <img alt="Google" src="../../Content/themes/base/icons/google-icon.png" class="login-icon" />
                                        <img alt="Yahoo" src="../../Content/themes/base/icons/yahoo-icon.png" class="login-icon" />
                                    </a>  
                                    <span> or  </span>
                                    <a href="#">Register</a>
                           }
                           else{
                                    <span>@GetCurrentUsername(this.Context)</span>

                                    <a href="#">Log out</a>

                                    <a href="#">Post</a>

                                    }
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
          @RenderBody()
      <div class="push">
        </div>
    </div>
    <div class="footer" align="center">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a class="active" href="#">Resources</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <p>
            Copyright © 2012 Domain - All rights reserved</p>
    </div>
</body>
</html>

Is there problem in mvc4, my code or something else?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The script works, you just need to ensure that the value of the textbox is the same as the title initially:

    <input type="text" ID="txtSearch" class="water" title="Search" value="Search" />

    Because that’s what you are checking here:

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

    And if the value is different than the title (in your case title=”Search” and value=””) you remove the water class and nothing will happen later.

    • 0