JQuery：如何在文本框不在焦点时隐藏DIV？

问题描述：

<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:TextBox ID="txtInsertComments" CssClass="expanding" runat="server" AutoPostBack="false" TextMode="MultiLine"></asp:TextBox> 
    </div> 
     <div id="commands"> 
      <table cellpadding="0" cellspacing="0" width="400px" id="tblCommands"> 
       <tr> 
        <td style="width: 50%; text-align: center;"> 
         <asp:LinkButton ID="lnbInsertRes" runat="server" CommandName="Insert" Font-Underline="false">Insert</asp:LinkButton> 
        </td> 
        <td style="width: 50%; text-align: center;"> 
         <asp:LinkButton ID="lnbCancelRes" runat="server" CommandName="Cancel" Font-Underline="false">Cancel</asp:LinkButton> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </form> 
</body> 
    <script type="text/javascript"> 
     $(function() 
     { 
      $("#commands").hide("normal"); 

      $("textarea[id$=txtInsertComments]").focus(function() 
      { 
       $("#commands").show("normal"); 
      }); 

     }); 
    </script> 
</html>

首先，这个页面载入时，在div #command加载非常快，然后消失。我需要该div保持隐藏状态，直到文本框txtInsertComments控件被点击或获得焦点。

二，当用户点击文本框txtInsertComments或文本框失去焦点时，div＃命令仍然存在，并且不隐藏。

任何帮助表示赞赏。

答

您可以使用CSS来隐藏#command DIV，直至要显示它：

<div id="commands" style="display:none">

然后使用模糊/焦点显示/隐藏＃命令DIV：

$('#txtInsertComments').blur(function() { 
    $("#commands").hide() 
}).focus(function() { 
    $("#commands").show() 
});

答

设置display:none最初在＃命令上。

<div id="commands" style="display:none">....

注意力不集中，只需使用模糊事件：

$(el).blur(function(){...});

答

$(document).ready(function() { 
    $('#<%=txtInsertComments.ClientID%>').blur(function() 
     { $("#commands").hide() }); 
    $('#<%=txtInsertComments.ClientID%>').focus(function() 
     { $("#commands").show() }); 
});

非常感谢您的快速回复。有用！ – Chuck 2009-11-30 17:06:44

好的，你们给我看的代码适用于基本的asp.net页面。有没有人有使用jQuery嵌套ListView控件的经验？这个相同的jQuery不适用于嵌套的ListView控件。 – Chuck 2009-11-30 17:23:44

非常感谢;）此代码是完美的;） – Schewns 2012-12-26 16:17:30

JQuery：如何在文本框不在焦点时隐藏DIV？

相关推荐