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

Wow..I錯過了compleatly！謝謝！ – formatc 2012-03-28 07:48:19

您正在使用相同的.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"); 
      } 
     }) 
    });

來源

2012-03-28 07:54:53 codeulike

你說得對，我會這樣做的。甚至認爲我現在只有一個這樣的人，如果有一天我決定增加更多的東西，那麼從來沒有想過要提前想。 – formatc 2012-03-28 08:08:42

jQuery的事件綁定：模糊，在mvc4焦點不工作

回答

相關問題