Question

这是我的代码：

<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仍然存在且未隐藏。

感谢任何帮助。

Answer 1

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

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

然后使用blur / focus来显示/隐藏#commands DIV：

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

Answer 2

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

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

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

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

Answer 3

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

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

3 个答案: