Jqueryバインドイベント：ぼかし、フォーカスがmvc4で機能しない

プロジェクトで使用する単純なテキストボックスの透かしスクリプトが見つかりましたが、何が間違っているのか理解できず、Firebugでデバッグしようとしました。ページがロードされたときにテキストボックスが何もないような働きをした後、jqueryのコードは一度だけ、その焦点にバインドさやぼかし、私は任意のブレークポイントがスクリプトでhitted取得表示されていないして、ここにスクリプトを使って全体のレイアウトのページです：Jqueryバインドイベント：ぼかし、フォーカスがmvc4で機能しない

<!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、私のコードなどに問題はありますか？

出典

2012-03-28 formatc

スクリプトは動作しますが、あなただけのテキストボックスの値が最初にタイトルと同じであることを確認する必要があります。それはあなたがここでチェックされているものですので

<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 = ""）と異なる場合は、水クラスを削除し、後で何も起こりません。

出典

2012-03-28 07:46:07

：

は、より多くのように、それがされるべきだと思います！ありがとう！ – formatc

透かしを含む可能性のあるテキストボックスのセットを記述し、特に透かしをオンまたはオフにするには、同じ.waterクラスを使用しています。

フォーカスとブラーイベントを添付すると、既に一部のテキストボックスから削除しているので、.waterセレクタが見つかることがなくなります。 Wow..Iはcompleatlyそれを逃した

$(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"); 
      } 
     }) 
    });

出典

2012-03-28 07:54:53 codeulike

あなたは正しいです、私はそれを行います。私は今でもそれらのうちの1つしか持っていないと思っていました。 – formatc

Jqueryバインドイベント：ぼかし、フォーカスがmvc4で機能しない

答えて

関連する問題