События jquery bind: размытие, фокус не работает в mvc4 - PullRequest
Новая
       2

События jquery bind: размытие, фокус не работает в mvc4

0 голосов
/ 28 марта 2012

Я нашел простой текстовый скрипт водяного знака, который собирался использовать в своем проекте, но я не могу понять, в чем дело, я попытался отладить с помощью 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, моем коде или чем-то еще?

Ответы [ 2 ]

1 голос
/ 28 марта 2012

Вы используете тот же класс .water для описания набора текстовых полей, которые могут иметь водяные знаки, а также для конкретного включения и выключения водяного знака.

Это может привести к беспорядку, например, при прикреплениисобытия focus и blur больше не ясно, что найдет селектор .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");
            }
        })
    });
1 голос
/ 28 марта 2012

Сценарий работает, вам просто нужно убедиться, что значение текстового поля изначально совпадает с заголовком: 

<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 = ""), вы удаляете класс воды, и позже ничего не произойдет.

...