Question

我找到了简单的文本框水印脚本，我将在我的项目中使用，但我无法理解什么是错的，我尝试使用Firebug进行调试，我只能在加载页面时看到它只通过jquery代码一次，之后文本框的行为就像没有被绑定到它的焦点或模糊，我没有看到任何断点在脚本中被命中，这里是带脚本的整个布局页面：

<!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>

mvc4，我的代码或其他什么问题？

Answer 1

该脚本有效，您只需要确保文本框的值最初与标题相同：

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

因为这是你在这里检查的内容：

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

如果该值与标题不同（在您的案例中为title =“Search”和value =“”），则删除水类，以后不会发生任何事情。

Answer 2

您正在使用相同的.water类来描述可能包含水印的文本框集，还可以专门打开和关闭水印。

这可能会变得混乱，因为当您附加焦点和模糊事件时，它不再清楚.water选择器会找到什么，因为您已经从某些文本框中删除了它。

认为应该更像：

    $(document).ready(function () {

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

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

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

Jquery绑定事件：模糊，焦点在mvc4中不起作用

2 个答案: