JQuery：当文本框失焦时，如何隐藏 DIV？答案

【问题标题】：JQuery: How do I hide a DIV when textbox is out of focus?JQuery：当文本框失焦时，如何隐藏 DIV？
【发布时间】：2009-11-30 16:53:44
【问题描述】：

这是我的代码：

<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 #command 仍然存在并且没有隐藏。

感谢任何帮助。

【问题讨论】：

标签： jquery focus

【解决方案1】：

您可以使用 CSS 隐藏#command DIV，直到您想显示它：

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

然后使用模糊/聚焦显示/隐藏#commands DIV：

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

【讨论】：

【解决方案2】：

最初在#commands 上设置display:none。

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

为了失去焦点，只需使用模糊事件：

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

【讨论】：

【解决方案3】：

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

【讨论】：

好的，你们向我展示的代码适用于基本的 asp.net 页面。有没有人有使用 jQuery 进行嵌套 ListView 控件的经验？同样的 jQuery 不适用于嵌套的 ListView 控件。